Top 10 CSS Snippets

The top 10 most useful css snippets of today.

I have noticed myself to use a few different code snippets on a daily basis so I thought some of you might find them useful. So here we go.

     

  1.    
    center     
    Centering a website (or other elements)
       
    The HTML

  2. <DIV class=wrap>  
  3. </DIV><!– end wrap –>  
<!-- end wrap -->

The CSS

  • .wrap { width:960px; margin:0 auto;}   
  •   .wrap { width:960px; margin:0 auto;}

     

    This is an oldie, but apperantly it is not as obvious as you would think.


  •    
    stickyfooter
       
    Sticky Footer (make footer always be on bottom without absolute positioning) 
    The HTML

  • <DIV id=wrap>  
  •   
  • <DIV id=main class=clearfix>  
  •   
  • </DIV>  
  •   
  • </DIV>  
  •   
  • <DIV id=footer>  
  •   
  • </DIV>  
  • The CSS

  • * { margin:0; padding:0; }    
  •   
  • html, body, #wrap { height: 100%; }   
  •   
  • body > #wrap {height: auto; min-height: 100%;}   
  •   
  • #main { padding-bottom: 150px; }  /* must be same height as the footer */  
  •   
  • #footer {   
  •         position: relative;   
  •  margin-top: -150px; /* negative value of footer height */  
  •  height: 150px;   
  •  clear:both;}    
  •   
  • /* CLEAR FIX*/  
  • .clearfix:after {content: “.”;   
  •  display: block;   
  •  height: 0;   
  •  clear: both;   
  •  visibility: hidden;}   
  • .clearfix {display: inline-block;}   
  • /* Hides from IE-mac */  
  • * html .clearfix { height: 1%;}   
  • .clearfix {display: block;}   
  • /* End hide from IE-mac */  
  •   * { margin:0; padding:0; } 
    
      html, body, #wrap { height: 100%; }
    
      body > #wrap {height: auto; min-height: 100%;}
    
      #main { padding-bottom: 150px; }  /* must be same height as the footer */
    
      #footer {
              position: relative;
       margin-top: -150px; /* negative value of footer height */
       height: 150px;
       clear:both;} 
    
      /* CLEAR FIX*/
      .clearfix:after {content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;}
      .clearfix {display: inline-block;}
      /* Hides from IE-mac */
      * html .clearfix { height: 1%;}
      .clearfix {display: block;}
      /* End hide from IE-mac */

     

    As of recently i have had to use this over 50 times… i think this is one of the most important tricks you will learn today.


  •    
    min-height
       
    Cross-Browser Min Height 
    The CSS

  • .element { min-height:600px; height:auto !important; height:600px; }   
  •   .element { min-height:600px; height:auto !important; height:600px; }

     

    You can replace the min-height and heigth with 12em or another value that works for you.


  •    
    box-shadow
       
    Box Shadow (CSS3) 
    The CSS

  • .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }   
  •   .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }

     

    As you can see since this is a CSS3 property you will need all the three commands to make it cross browser(except for ie of course). The first 2 measurements are for horizontal offset and the vertical offset. The third number is for the blur radius. And the last is the color of the shadow.


  •    
    text-shadow
       
    Text Shadow (CSS3) with IE hack 
    The CSS

  • .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }   
  •   .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

     

    This technique is great for all modern browsers, the IE fix works but it is not amazing quality.


  •    
    opac
       
    Cross Browser CSS Opacity 
    The CSS

  • .transparent {   
  •      
  •   /* Modern Browsers */ opacity: 0.7;   
  •   
  •   /* IE 8 */ -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;   
  •   
  •   /* IE 5-7 */ filter: alpha(opacity=70);   
  •   
  •   /* Netscape */ -moz-opacity: 0.7;   
  •   
  •   /* Safari 1 */ -khtml-opacity: 0.7;   
  •      
  • }   
  •   .transparent {
    
        /* Modern Browsers */ opacity: 0.7;
    
        /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    
        /* IE 5-7 */ filter: alpha(opacity=70);
    
        /* Netscape */ -moz-opacity: 0.7;
    
        /* Safari 1 */ -khtml-opacity: 0.7;
    
      }

     

    Opacity can be used for plenty of elements, it adds a certain new age style we all strive for. Notice that in some browsers transperancy is inherited by all child elements!


  •    
    reset
       
    The Famous Meyer Reset 
    The CSS

  •   html, body, div, span, applet, object, iframe,   
  • h1, h2, h3, h4, h5, h6, p, blockquote, pre,   
  • a, abbr, acronym, address, big, cite, code,   
  • del, dfn, em, font, img, ins, kbd, q, s, samp,   
  • small, strike, strong, sub, sup, tt, var,   
  • dl, dt, dd, ol, ul, li,   
  • fieldset, form, label, legend,   
  • table, caption, tbody, tfoot, thead, tr, th, td {   
  •  margin: 0;   
  •  padding: 0;   
  •  border: 0;   
  •  outline: 0;   
  •  font-weight: inherit;   
  •  font-style: inherit;   
  •  font-size: 100%;   
  •  font-family: inherit;   
  •  vertical-align: baseline;   
  • }   
  • /* remember to define focus styles! */  
  • :focus {   
  •  outline: 0;   
  • }   
  • body {   
  •  line-height: 1;   
  •  color: black;   
  •  background: white;   
  • }   
  • ol, ul {   
  •  list-style: none;   
  • }   
  • /* tables still need ‘cellspacing=”0″‘ in the markup */  
  • table {   
  •  border-collapse: separate;   
  •  border-spacing: 0;   
  • }   
  • caption, th, td {   
  •  text-align: left;   
  •  font-weight: normal;   
  • }   
  • blockquote:before, blockquote:after,   
  • q:before, q:after {   
  •  content: “”;   
  • }   
  • blockquote, q {   
  •  quotes: “” “”;   
  • }   
  •    
  •   html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
     outline: 0;
    }
    body {
     line-height: 1;
     color: black;
     background: white;
    }
    ol, ul {
     list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
     border-collapse: separate;
     border-spacing: 0;
    }
    caption, th, td {
     text-align: left;
     font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
     content: "";
    }
    blockquote, q {
     quotes: "" "";
    }

     

    This is the most useful css reset out there, i use it for almost everything I work on (even the 52framework, coming soon).


  •    
    dotted
       
    Removing the dotted outlines 
    The CSS

  • a, a:active { outline: none; }   
  •   a, a:active { outline: none; }

     

    I find myself getting very annoyed with the dotted outline (especially for text-indented elements that are off the page).


  •    
    rounded
       
    Rounded Corners (non ie) 
    The CSS

  • .element {   
  •  -moz-border-radius: 5px;   
  •  -webkit-border-radius: 5px;   
  •  border-radius: 5px; /* future proofing */  
  • }   
  • .element-top-left-corner {   
  •  -moz-border-radius-topleft: 5px;   
  •  -webkit-border-top-left-radius: 5px;   
  • }   
  •   .element {
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px; /* future proofing */
      }
      .element-top-left-corner {
       -moz-border-radius-topleft: 5px;
       -webkit-border-top-left-radius: 5px;
      }

     

    Love rounded corners? Don’t want to slave over images and elements to get the effect? This is your solution, and elements still look fine in ie.


  •    
    import
       
    Override Inline Styles 
    The CSS

  • .override {   
  •  font-size: 14px !important;   
  • }   
  •   .override {
       font-size: 14px !important;
      }

     

    This comes in handy plenty of times, I personally use it way too much smile everytime something doesn’t work I test if its just not being applied because of some other style.

    Related Posts: