Homage to/recreation of the title sequence to TV show "Mad Men" with personalities from An Event Apart, using CSS3 animations and transforms. Even browsers incapable of displaying the animation get a treat: a frame-by-frame storyboard.
Mozilla Dev Derby Challenge - June 2011
A series of demos from multiple developers and designers stretching the limits of CSS3, with "no or minimal JavaScript." Impressive and inspiring, winners and runners-up both.
The Expressive Web Beta
Adobe-sponsored showcase of interactive CSS3 and HTML5 demos.
Web Typography for the Lonely
A gallery of big-impact, beautiful typographic experiments.
Flux Slider
A gallery of "hardware accelerated image transitions using CSS3," including both 2D and 3D effects.
The Shapes of CSS
Examples, with code, of the variety of shapes that can be created in-browser with nothing but CSS (no images) -- everything from plain rectangles and circles to stars, octagons, hearts and more.
CSS3 Animations and Masking Text
Masked text with an animated CSS3 color wash.

Articles & Blog Posts

Intro to CSS 3D Transforms
Multi-part primer on using CSS3 to create carousel, cube, card flip and other three-dimensional transition effects. Also includes multiple demos, with code samples.
Let the Web move you - CSS3 Animations and Transitions
Incredibly detailed article by John Allsopp (@johnallsopp)about creating rich interactions using CSS3 animations and transitions, including the benefits of using CSS over JavaScript.
Techniques for Gracefully Degrading Media Queries
Overview of approaches to implementing media queries while considering older browsers, including those using JavaScript and conditional comments.
Rethinking CSS Grids
Thoughts on an approach to page layout centered on content modules first, instead of grids, using the CSS grid module.
Shading with CSS Text Shadows
Quick look at how to create eye-catching logos with this typographic CSS effect.
CSS Arrows and Shapes Without Markup
Examination of the code and techniques used to create shapes without images using CSS borders.
Pure CSS 3D Ribbon
How to create a ribbon with the pointy bits at each end via dynamic content generation.
Screen Resolution ≠ Browser Window
A helpful reminder for all of us. Includes results of a test of actual browser widths of visitors to


CSS3 Gradient Generator
A tool for creating CSS gradients, with Photoshop-esque color picker and inline preview with generated code.
CSS3, please!
View and edit (cross-browser) CSS3 rules in your browser, and watch the adjacent box and its contents instantly update based on your edits.
CSS3 Generator
Form-based CSS3 effects generator, one property at a time. Includes code snippet, browser-support key and inline preview.
Web-based tool for creating CSS3 animations and transitions -- everything from the core shapes and elements to the effects themselves.
Modular Scale
An invaluable tool for generating the right em-based values for truly responsive web typography.
Get realistic web type previews with Typetester, which lets users specify typeface and styling for three side-by-side blocks of text. Includes controls for em-based size, leading, tracking.
3D Ribbon Generator
Input your ribbon attributes into a form, and generate to view. Includes preset examples you can customize.
Ceaser - CSS Easing Animation Tool
Specify and preview timed animation effects using different easing styles.
See the specific CSS, HTML and other elements and attributes your web browser supports.
When can I use...
Similar to the above, except for a wide range of browsers in common use, so you can see whether or not the effect you've chosen will be widely viewable.
3-Layer Cake Prototype
CSS3 used to dynamically increment and generate numbered labels for wireframe or design annotations. Part of my own little framework for easily creating interactive, web-native prototypes.

Grids and Page Layout Systems

HTML5 Boilerplate
"A rock-solid default for HTML5 awesome." A great starting point for any web design, it helps normalize and smooth the rough edges off some of the vexing differences in capabilities between browsers. Covers HTML, CSS and JavaScript.
320 and up
A mobile-first "tiny-screen first" approach to web design, by Andy Clarke (@malarkey). Start with the minimal design info, then "load assets and layout styles progressively and only as they're needed" so mobile users aren't stuck wasting bandwidth on assets they'll never see/use.
The 1140px CSS Grid System
A twelve-column, fluid grid system built to work with layouts from desktop to mobile.
Another boilerplate, this one focused on "mobile first responsive, cross-browser websites with beautiful typography."
A "responsive grid down to mobile" using CSS3 media queries, Skeleton is based on a variation of the 960 grid system.
Stack Layout
Annoyed by the flaky behavior of floats? Then try this "flexible width, component based CSS layout system," which uses
display: inline
extensively for layouts instead.
jQuery Masonry
Use this jQuery plug-in to automagically rearrange content blocks onscreen in a way that minimizes gaps between them, like a walkway made of paving stones of different shapes and sizes.
Another jQuery plug-in, one that builds upon what Masonry does and adds more features, like the ability to modify layouts and rearrange content based on module attributes.