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