Tutorials and examples

http://www.css3.info/preview/
http://w3schools.com/css3/ - interactive examples

New features

Colors (hex, rgb, hsl, rgba, hsla – rgb values are 0-255; a is alpha for opacity/transparency)
Opacity (0.0 is transparent, 1.0 is opaque, 0.5 is semi-transparent)
Backgrounds (size, origin, clip)
Gradients (horizontal, vertical, diagonal, or gradient; multiple stops)
http://css-tricks.com/css3-gradients/ - technical overview; gradient images no longer needed
http://gradients.glrzad.com/ - simple gradient generator
http://www.colorzilla.com/gradient-editor/ - another gradient generator
Borders (border-radius gives round corners; borders can use images)
Box (box-sizing: border-box; puts padding and border inside the box – good for liquid layouts)
Shadows (text, box)
Text (overflow, word-wrap)
Transforms (translate, rotate, scale, skew, matrix)
Transitions (property, duration, timing function, delay)
Animations (keyframes, properties) - instead of animated images, Flash or JavaScript

Vendor-specific prefixes

Different browsers use vendor-specific prefixes to extend CSS with their own properties.
-webkit- is used by Apple Safari, Google Chrome, and Dreamweaver CS 5.5.
-moz- is used by Mozilla Firefox.
-o- is used by Opera.
-ms- and filter are used by Microsoft Internet Explorer.
Newer browsers use the standard properties, so put them last, after vendor-specific properties.

Microsoft visual filters

http://rainbow.arch.scriptmania.com/css/ie_filters_generator.html - demo (limited options)
http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx – full documentation

Generators

Easily generate cross-platform CSS3 code from a GUI and copy into your stylesheet
http://css3please.com/
http://css3generator.com/
http://www.css3.me/
http://www.css3maker.com/

Resets

http://meyerweb.com/eric/tools/css/reset/
http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
http://html5doctor.com/html-5-reset-stylesheet/
Different browsers use different defaults for font size, padding, margins, borders, line height, etc.
Use CSS resets to override browser defaults and render a page consistently in all browsers.
Use reset files for XHTML and HTML 5 that others have developed and tested.
Dreamweaver CS5.5 HTML 5 templates seem to do much of this work.

Conditional stylesheets for Internet Explorer

To handle Internet Explorer versions, you can create one or more separate stylesheets.
This separates IE-only CSS from other browsers and makes validation easier.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Avoid using CSS filters that use hacks to detect browsers, but know it is a last-resort option.
http://en.wikipedia.org/wiki/CSS_filter

New selectors

http://www.w3schools.com/cssref/css_selectors.asp
http://www.w3.org/TR/selectors/#selectors
A CSS selector determines which elements should have style rules applied to them.
CSS3 selectors add to the already powerful selectors in CSS2. Just a few examples:
Attribute selectors are especially useful to select and format links based on their href.
[attribute^=value] – begins with, [attribute$=value] – ends with, [attribute*=value] – contains
a[href$=".pdf"] { padding-right: 20px; background: url(pdf.png) center right no-repeat; }
:nth-of-type(n) and :nth-child(n) - select the nth, first, last or only element; useful for coloring alternate rows differently, creating rows and columns, and creating borders on navigation
tr:nth-child(even) { background-color: #eee; }
:enabled, :disabled, :checked – select form input elements based on their state

@font-face Web fonts

http://www.slideshare.net/RZasadzinski/web-font-services-march-2011 - overview presentation
For cross-browser compatibility, developers used to be limited to a small number of fonts.
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Internet Explorer has long supported web fonts, but now other browsers can also display them.
You can either download fonts, or link directly to online font services, free or commercial.
http://www.google.com/webfonts - easiest to use but limited font selection
http://www.fontsquirrel.com/fontface - download many free OTF or TTF fonts
http://www.webfonts.info/ - free and commercial web fonts
http://www.typekit.com/ - commercial web fonts

CSS frameworks, preprocessors and generators

CSS frameworks can automatically generate vendor prefixes.
They have other features that programmers like, such as variables, mixins (classes for classes), nested rules, math operations within CSS, color functions, and JavaScript evaluation.
The JavaScript can decrease performance, so it is also possible to generate CSS code, but this must be regenerated every time the source file is changed.
This can be automated, depending on the server and development platform used.
http://en.wikipedia.org/wiki/CSS_frameworks
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
http://lesscss.org/ - easy to start using; just download a JavaScript file and add a script tag for it
http://sass-lang.com/ - requires the Ruby programming language which is available on all Macs
http://compass-style.org/ - uses Sass for CSS3, typography, styling tools, page layout and resets

JavaScript libraries for improved HTML5 and CSS3 compatibility

http://modernizr.com/ - supports HTML5 and CSS3; generate code for only needed features
http://selectivizr.com/ and http://css3pie.com/ - CSS3 support for Internet Explorer 6-9
http://headjs.com/ - improve browser support and performance of HTML5, CSS3 and JavaScript

CSS template systems

Develop complex CSS grid layouts and templates more quickly with one of these frameworks.
http://www.tripwiremagazine.com/2009/06/css-grid-layout.html
http://960.gs/ – popular and easy to use CSS grid layout, used by ACNS and RamCT Help sites
http://blueprintcss.org/ – CSS framework that includes grid, typography and print
http://yuilibrary.com/yui/docs/cssgrids/ – layout used by the CSU Libraries Discovery tool
http://jqueryui.com/ – includes a CSS framework to build custom jQuery widgets
http://html5reset.org/ - a set of starting tools (CSS resets, jQuery, Analytics, modernizer, etc.)