CSS3 is Awesome
A compendium of online tools, demos, articles and blog posts showcasing how CSS3 can be used to create kick-ass web sites
Madmanimation 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.
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.
CSS3 Gradient Generator A tool for creating CSS gradients, with Photoshop-esque color picker and inline preview with generated code.
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.
AnimatR 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.
Typetester 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.
haz.io 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
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.
Gridless Another boilerplate, this one focused on "mobile first responsive, cross-browser websites with beautiful typography."
Skeleton 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.
Isotope 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.