1. Introduction to CSS3

2. What’s different about CSS3?
1. Selectors
2. RGBA And Opacity
3. Multi-Column Layout
4. Multiple Backgrounds
5. Word Wrap
6. Text Shadow
7. @font-face-Attribute
8. Border Radius
9. Border Image
10. Box Shadow
11. Box Sizing
12. Media Queries
13. Speech
http://coding.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/

3. CSS3
CSS
http://trentwalton.com/examples/CSS3_Speed_Test/

4. 1. linear-gradient
2. border-radius
3. radial-gradient
4. text-shadow
5. box-shadow with RGBa
http://coding.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

5. Selectors: Pseudo-Classes
CSS3 provides four powerful pseudo-classes that allow the CSS designer to select
multiple elements according to their positions in a document tree. Using these
pseudo-classes can be a little confusing at first, but it’s easy once you get the
hang of it. The pseudo-classes are:
:nth-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-last-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
:nth-last-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
http://reference.sitepoint.com/css/understandingnthchildexpressions

6. Selectors: Pseudo-Classes

7. Selectors: Pseudo-Classes
:last-child - matches an element that’s the last child element of its parent element
:first-of-type - matches the first child element of the specified element type
:last-of-type - matches the last child element of the specified element type
:only-child - matches an element if it’s the only child element of its parent
:only-of-type - matches an element that’s the only child element of its type
:root - matches the element that’s the root element of the document
:empty - matches elements that have no children
:target - matches an element that’s the target of a fragment identifier in the document’s URI
:enabled - matches user interface elements that are enabled
:disabled - matches user interface elements that are disabled
:checked Pseudo-class - matches elements like checkboxes or radio buttons that are checked
:not(S) - matches elements that aren’t matched by the specified selector
http://reference.sitepoint.com/css/css3psuedoclasses

8. Selectors: Pseudo-Classes: Browser Compatibility
http://www.quirksmode.org/css/contents.html

9. RGBA & Opacity
http://24ways.org/2009/working-with-rgba-colour

10. RGBA & Opacity
http://coding.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3

11. RGBA & Opacity: Browser Compatibility
http://caniuse.com/#feat=css3-colors

12. Cross-browser support with CSS Vendor Prefixes
CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for
new CSS features in a sort of testing and experimentation period. Browser prefixes are used
to add new features that may not be part of a formal specification and to implement features
in a specification that hasn’t been finalized.
The CSS browser prefixes are: Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

13. Cross-browser support with CSS Vendor Prefixes
In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix
above for each browser. For example, if you want to add a CSS3 transition to your document, you would use the
transition property with the prefixes listed first:
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

14. Cross-browser support with CSS Vendor Prefixes
Yes, might feel annoying and repetitive to have to write the properties 2–5 times to get it to work in all
browsers, but it’s temporary. As browsers improve, they add support for the standards based version of
the property, and you can remove the prefixed versions. For example, just a few years ago, to set a
rounded corner on a box you had to write:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;
But now you really only need:
-webkit-border-radius: 10 5px;
border-radius: 10px 5px;
http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm