Google Translate

snippets

  • If a word starts with # or @ or other special char like $, your autocomplete search fails? Here a workaround to fix it.

  • This contains some great css snippets found on internet or  just created/changed by myself. 


    Box with glass border
    .box {
        background: #f0edcc;
        background-clip: padding-box;          /* Background stops at border */
        border: 4px solid rgba(255,255,255,.2);
        border-radius: 3px;
        box-shadow:
           0    0   1px  rgba(255,255,255,.8), /* Bright outer highlight */
           0    0   3px  rgba(0,0,0,.8),       /* Outer shadow */
           1px  1px 0    rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */
          -1px -1px 0    rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */
        padding: 10px;
    }

    thanks to Jordan Gray for his post on stackoverflow


    Break word for word wrap
    .acapo{
    word-break
    :break-all
    }

     


    Apply to classes starting with...

    ...ie: to select all classes starting with leading like "leading-[n]". The [n] is 1, 2, 3...n

    [class*="leading"] {
      margin: 0 0 20px 0;
    }

     


    Apply to First and Last element
    .nav li:first-child a {
        border-left: 0;
        border-radius: 3px 0 0 3px;
    }
    .nav li:last-child a {
        border-right: 0;
        border-radius: 0 3px 3px 0;
    }

      


    Text Gradient 
    .mytextgradient {
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent;
      color: #234EFA;
      background: -webkit-linear-gradient(#234EFA 50%, #040A22);
    }

     


    PNG-Shadow 

    Shadow for transparent image

    my-Transparent-img {
       -webkit-filter: drop-shadow(5px 5px 5px #222); 
       filter: drop-shadow(5px 5px 5px #222); 
    }

     Thanks to Stackoverflow for the discussion

     


    Image auto resize 
    /* image auto size when resize the browser */
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto\9; /* ie8 */

     

     


     

    Select Next Element
    p:nth-child(2) {
        background: #ff0000;
    }
    p:nth-child(4) {
        background: #00000;
    }
    
    p:nth-child(odd) {
        background: #ff0000;
    }
    
    p:nth-child(even) {
        background: #0000ff;
    }
    
    p:nth-child(3n+0) {
        background: #ff0000;
    }

     

    CSS Reflection
    /* chrome and safari */
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

     HongKiat Blog

     

     CSS hover can display hidden element

    /* will show the element with class tooltiptext */
    .tooltip:hover .tooltiptext {
    	display: block;
    	opacity: 1;
    }

     


    To Be Continued... 

    Stay tuned, I will add more snippets soon...

     

  • Some CSS Snippets specific for the each browser.

  • Here a collection of dos script. Just my notes shared with you.

  • Some useful Javascript Snippets 

  • Some useful notes regarding the Joomla.

  • This page contains some jquery code snippets. I wrote them day by day during developping, so they are not well organized but for sure they are useful.

  • Here some useful snippets.

  • Some useful linux commands

  • ┬áList of useful snippes for Lotus Script, the main language used in Lotus Notes / Domino.

  • Alcuni comandi utili da utilizzare in un server MSSQL.

  • Some useful snippet for the database mysql.

  • Some useful snippets for the Hypertext Preprocessor or better knows as PHP.

  • Alcuni appunti sul complicato mondo del "regex".

    i seguenti appunti sono stati testati sulla ricerca estesa di notepad++

  • Some useful snippets regarding some windows commands.