10 Best Tutorials To Learn CSS3

In the last few years, web design has improved significantly. There are so many tutorials out there to increase the skills capacity web designers and web developers. Some popular browsers such as Firefox, Safari already supported some CSS3 properties, and now the designer has many CSS3 properties. Today, I will share some tutorials, tips and tricks about CSS3.

1. Introduction to CSS3 – Part 1: What Is It?

There are six part series which providing an introduction to the new CSS3 standard which is set to take over from CSS2 from DesignShack.

2.Get Started with CSS

These site explaining several new CSS3 features and giving solutions how to create them actually. You will get beautiful CSS3 tutorial articles.

3. The fundamental problems with CSS3

Have problem with CSS3 issues? This article will bring you to solve several problem about it

4. CSS 3 Cheat Sheet (PDF)

CSS 3 Cheat Sheet is printable article (PDF), the article which consist of a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that match it with the section (module) which it is associated within the W3C specification avtively.(Download *pdf)

5. Rounded Corner Boxes the CSS3 Way


This CSS3 tutorial will lead you to make rounded Corner Boxes.

6. 11 Classic CSS Techniques Made Simple with CSS3

In this article, you will find the eleven different techniques to make CSS3 easily.

7. 3 Easy and Fast CSS Techniques for Faux Image Cropping

This CSS articles give the technique crop the image easily.

8. Get the best out of CSS3

Get the best out of CSS3

Take a peek about the future of CSS with a little help from Opera, Safari and Firefox like Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant.

9. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, you are going to build a blog page using next-generation techniques from HTML 5 and CSS3. The tutorial goal is to demonstrate how we will build websites when the specifications are finalized and the browser vendors have been implemented them.

10. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

Trusted article to create vertical sliding panel with CSS3 and JQuery.

原文连接:10 Best Tutorials To Learn CSS3

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

    The HTML

    <div class="wrap">  
    </div><!-- 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. Sticky Footer (make footer always be on bottom without absolute positioning)

    The HTML

    <div id="wrap">  
    <div id="main" class="clearfix">  
    <div id="footer">  

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

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

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

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

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

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

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

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

  10. Override Inline Styles

    The CSS

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

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

原文链接:Top 10 CSS Snippets