enavu webdevmania tutsvalley psdestination
visit the enavu network
5 Comments Article Title Overlay Article Title

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.
 
          Centering a website (or other elements)    [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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
    <!-- end wrap -->

    The CSS

     

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

     

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

     

  2.  


  3.    
    stickyfooter

       
    Sticky Footer (make footer always be on bottom without absolute positioning)

     
    The HTML

     

    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 */
    

     

    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.

     

  4.  


  5.    
    min-height

       
    Cross-Browser Min Height

     
    The CSS

     

      .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.

     

  6.  


  7.    
    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; }
    

     

    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.

     

  8.  


  9.    
    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); }
    

     

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

     

  10.  


  11.    
    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;
    }
    

     

    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!

     

  12.  


  13.    
    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: "" "";
    }
    

     

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

     

  14.  


  15.    
    dotted

       
    Removing the dotted outlines

     
    The CSS

     

      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).

     

  16.  


  17.    
    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;
    }
    

     

    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.

     

  18.  


  19.    
    import

       
    Override Inline Styles

     
    The CSS

     

      .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.

     

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Top 10 HTML Snippets
  2. Top 10 jQuery Snippets (including jquery 1.4)
  3. 10 Awesome jQuery and JavaScript Snippets
  4. jQuery/CSS Incremental Layout Size Adjuster
  5. CSS Tabs

Did you absolutely LOVE this article... share it!

Comments

  • You should include Bodoni on this list as well. http://en.wikipedia.org/wiki/Bodoni
    Its a great font!

  • Very interesting as well as informative post.Thanks for providing for us.I read your article with my pleasure.
    Search Engine Optimisation

  • For some of the point the explaination is not enough like the 10th point. I think this article assumes the person already knows CSS and for advanced users.

    Thanks

  • Great collection of code snippets for css, great for a reminder, Thanks

  • removing the dots decreases usability for people that surf with their keyboards…

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting