Stunning CSS3
A Project-based Guide to the Latest in CSS
Links
Each chapter contains several links to related resources, articles, tutorials, tools and examples that I think would be useful for you to check out. It's certainly easier to click on a live link than painstakingly type out a URL that you're copying from a printed book, so here's a compendium of all the links from each chapter.
Chapter 1: The CSS3 Lowdown
- W3C CSS current work
- Net Applications Browser Market Share
- Usage share of web browsers
- Mozilla CSS support chart
- Web specifications support in Opera
- Safari CSS Reference
- Comparison of layout engines (Cascading Style Sheets)
- FindMeByIP
- When can I use...
- Standardista
- CSS contents and browser compatibility
- Firefox CSS Properties
- Webkit CSS Properties
- Guide to CSS support in email clients
- Designing with Progressive Enhancement
- The Case for Designing with Progressive Enhancement
- Progressive Enhancement: What It Is, And How To Use It?
- Progressive Enhancement: Paving the Way for Future Web Design
- Graceful degradation versus progressive enhancement
- Best Practices for Speeding Up Your Web Site
- The performance business pitch
- Prefix or Posthack
- Sass
- LESS
- Stop Forking with CSS3 (eCSStender)
- Vendor prefixes—what happens next?
- Vendor-prefixed CSS Property Overview
- Modernizr
- Taking Advantage of HTML5 and CSS3 with Modernizr
- IE7.js
- Selectivizr
- cssSandpaper JavaScript library
- PIE script
- Microsoft Visual Filters and Transitions Reference
- Star Html Hack
- The Underscore Hack
- Conditional comments block downloads
- Things You Might Not Know About Conditional Comments
- Conditional stylesheets vs CSS hacks? Answer: Neither!
- Make Your Mockup in Markup
- Walls Come Tumbling Down presentation slides and transcript
Chapter 2: Speech Bubbles
- CSS3 rounded corners syntax
- The hidden power of border-radius
- W3C CSS3 Text module
- How to prevent HTML tables from becoming too wide
- Wrapping Text Inside Pre Tags
- W3C CSS3 Backgrounds and Borders module
- Boxes with Rounded Corners
- Table of CSS3 border-radius Compliance
- 25 Excellent CSS3 Button Tutorials
- Button Maker tool
- Animated wicked CSS3 3d bar chart
- Pure CSS & HTML Crazy Faces
- PIE script
- curved-corner script
- IE-CSS3 script
- DD_roundies script
- CSS Rounded Corners 'Roundup'
- Rounded corner techniques
- XHTML Character Entity Reference
- Unicode Code Converter
- Colors software
- HSL to RGB / RGB to HSL / Hex Colour Converter
- Doughnut Color Picker
- Rainbow Firefox extension
- W3C CSS3 Color module
- Text Blocks Over Image
- Snazzy Hover Effects Using CSS3
- Bulletproof, cross-browser RGBA backgrounds, today
- PIE Supported CSS3 Features
- CSS background transparency without affecting child elements, through RGBa and filters
- RGBa & HSLa CSS Generator for Internet Explorer
- On having layout
- W3C CSS3 Image Values module draft and final version
- CSS3 Gradient Buttons
- Sexy CSS Buttons
- Create a studio-style backdrop with CSS3
- Pure CSS Vignette
- Create the ThinkGeek background effect using CSS3
- CSS3 Sidebar Full Height Background Color
- CSS gradient syntax: comparison of Mozilla and WebKit (Part 2)
- css gradients in Firefox 3.6
- Safari CSS Visual Effects Guide: Gradients
- CSS gradient syntax: comparison of Mozilla and WebKit
- CSS3 Gradient Generator v2.0
- Linear gradients generator (westciv.com)
- Radial gradients generator (westciv.com)
- CSS gradient generator (Display:inline)
- CSS Gradients via Canvas
- Microsoft gradient filter
- Box shadow generator (westciv.com)
- Multiple Borders via CSS box-shadow
- CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited!
- Experiments With CSS3 border-radius and box-shadow
- Vignettes with CSS3 Box Shadows
- CSS3 Box Shadow in Internet Explorer [Blur-Shadow]
- Cross-browser CSS box-shadows
- Text shadow generator (westciv.com)
- The New Lens Flare
- How to Create Inset Typography with CSS3
- Text-shadow, Photoshop like effects using CSS
- I ♥ BLUR
- 3D Text Tower
- Using CSS3 Text Shadow for Active Link States
- CSS Text-Shadow in Safari, Opera, Firefox and more
- Microsoft static filters
- Text-shadow in IE with jQuery
- CSS-3 Text-Shadow jQuery plugin
- Mootools text drop-shadow
- Transforms tool (westciv.com)
- W3C 3D Transforms module
- W3C 2D Transforms module
- How to create a CSS3 tag cloud like on this blog
- Text Rotation with CSS
- Dinky pocketbooks with WebKit transforms
- Demo 2 - Sliding by translating the images (transitions and transforms)
- CSS3 Tutorial: Sleek Card Pockets using CSS Only
- how to create 3d cube using css3
- IE's CSS Transforms Translator
- cssSandpaper JavaScript library
- Bringing CSS Transforms to Internet Explorer
Chapter 3: Notebook Paper
- W3C CSS3 Backgrounds and Borders module
- Supersize that Background, Please!
- Liquid faux columns with background-size
- Hi Res Mobile CSS for iPhone 4
- Water Stains Photoshop & GIMP Brushes
- CSS3 Multiple Backgrounds Obsoletes Sliding Doors
- Multiple Backgrounds: Oh, What a Beautiful Thing.
- Auto-scrolling Parallax Effect without JavaScript
- Create the ThinkGeek background effect using CSS3
- Multiple Backgrounds and Borders with CSS 2.1
- ExplorerCanvas
- mb.js (multiple backgrounds script)
- border-image in Firefox
- CSS3 Border Image Experiments
- border-image-generator
- Grokking CSS3 border-image
- Webkit introduces ‘background-clip:text’
- CSS3 Background-Clip: Text
- CSS3 Background-Clip & @Font-Face
- Fixing the background 'bleed'
- PIE script
- borderImage jQuery plugin
- Meet a ninja living in browsers
- Roundup: CSS font stacks
- Web Fonts at the Crossing
- Securing @font-face
- Web fonts licensing overview
- The League of Moveable Type
- Fonts available for @font-face embedding (Webfonts.info wiki)
- Font Squirrel
- Google Font Directory
- What's the benefit of using the Google Font API?
- Google Font Directory
- Kernest
- exljbris
- Fontfabric
- Fonthead
- FontSpring
- Web FontFonts (FontShop)
- Typekit
- Fontdeck
- Web Fonts from Ascender
- FontsLive (Ascender)
- WebINK
- Webtype
- Typotheque
- Just Another Foundry
- Fonts.com Web Fonts
- Soma FontFriend bookmarklet
- The Ails Of Typographic Anti-Aliasing
- Font Hinting Explained By A Font Design Master
- Font smoothing, anti-aliasing, and sub-pixel rendering
- Browser Choice vs Font Rendering
- -webkit-font-smoothing
- Font Smoothing
- The Little Known font-size-adjust CSS3 Property
- About Fonts in SVG
- WOFF Frequently Asked Questions (W3C)
- @font-face browser support
- Font Squirrel's @font-face font kits
- Font Squirrel’s @font-face Kit Generator
- EOTFAST
- ttf2svg
- Bulletproof @font-face syntax
- Different Fonts Named The Same: Does This Happen Frequently?
- Font-face in Chrome
- W3C CSS3 Fonts module
- Dingbat Webfonts: Great potential, but we see (and hear) accessibility issues
- Web Fonts, Dingbats, Icons, and Unicode
- Preloading images
- TypeFront (web font distribution platform)
- HTTP Caching
- @font-face gzipping – take II
- Fighting the @font-face FOUT
Chapter 4: Styling Images and Links by Type
- The CSS3 :not() selector
- Attribute Not Equal Selector [name!="value"] (jQuery)
- MooTools selectors
- SelectORacle
- W3C definition of identifiers
- W3C definition of strings
- famfamfam Silk icons
- IE7.js
- Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery
- YUI Selector Utility
- Sizzle (JavaScript CSS selector engine)
- Sly (JavaScript CSS selector library)
- Selectivizr
- jQuery SuperSelectors plugin
- W3C CSS3 Selectors module
- Styling Forms with Attribute Selectors - Part 1
- Better Email Links: Featuring CSS Attribute Selectors
- Unconventional: CSS3 Link Checking
- The Attribute Selector for Fun and (no ad) Profit
Chapter 5: Improving Efficiency Using Pseudo-classes
- CSS3 structural pseudo-class selector tester
- Zebra Striping: More Data for the Case
- W3C CSS3 Selectors module
- Understanding :nth-child Pseudo-class Expressions
- Using CSS3 to Properly Center Thumbnail Galleries
- Clever lists with CSS3 selectors
- :nth-child() test
- Selectivizr
- Building sites without using IDs or classes
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- CSS Sprites Workflow
- CSS Sprites: Useful Technique, or Potential Nuisance?
- Automatic numbering with CSS Counters
- :target and conditional text display
- Fun with :target
- CSS3-Only Tabbed Area
- Accordion using only CSS
- Create the accordion effect using CSS3
- Using CSS3′s :target pseudo-class to Make a Slideshow
- Create a JQuery Content Slider Using Pure CSS
- Pure CSS Sliding Image Gallery
- Sliding image gallery in CSS3
- Slideshow image gallery in CSS3
- Semantic CSS3 Lightboxes
- Futurebox, revisited
- Suckerfish :target
- Improving the usability of within-page links
- Fragment Highlight
- Web Interface Design Tip: The Yellow Fade Technique
- CSS3 transitions and animation: Presentation or behavior?
- Elliot Swan's comment on Covering the Implication and Basics of CSS Animation
- HTML5 Family: CSS3 Ads Versus Flash Ads
- Animatable properties (W3C transitions)
- W3C CSS3 Transitions module
- CSS Transitions 101
- Sexy Interactions with CSS Transitions
- CSS3 Transition-Delay
- Using CSS3 Transitions, Transforms and Animation
- Rocking icons with CSS
- Drop-In Modals
- Polaroids with CSS3
- Animated wicked CSS3 3d bar chart
- Showing and hiding content with pure CSS3
- Animated Sprites with CSS3 Transitions
- Auto-scrolling Parallax Effect without JavaScript
- W3C CSS3 Animations module
- Radioactive Buttons
- CSS Animations
- Super Cool CSS Flip Effect with Webkit Animation
- Sliding Vinyl with CSS3
- Modernizr
- Stay on :target
- CSS3 animations and their jQuery equivalents
- CSS Transitions via jQuery Animations
Chapter 6: Different Screen Size, Different Design
- Media features (W3C media queries)
- W3C CSS3 Media Queries module
- Proportional leading with CSS3 Media Queries
- Hi Res Mobile CSS for iPhone 4
- Flexible Web Design bonus materials
- Deal-breaker problems with CSS3 multi-columns
- Multicolumn layout considered harmful
- More on multi-column layouts
- CSS3 Multi-Column Thriller
- CSS3 - Multi Column Layout Demonstration
- Columnizer jQuery plugin
- MooColumns MooTools class
- Multi-column script
- Column script
- W3C CSS3 Multi-column Layout module
- CSS3 Multi-Column Layout & Column-Count
- Icon Eden's Yummy icons
- Combining media queries and JavaScript
- Cell Phone Screen Resolution, sorted by brand and model
- Designing for the Retina Display (326ppi)
- A tale of two viewports—part two
- ProtoFluid
- Web Developer Firefox extension
- Mobile browsers
- Return of the Mobile Stylesheet
- css3-mediaqueries-js
- CSS 3 Media Queries for all Browser (jQuery Plugin)
- jQuery browserSizr
Chapter 7: Flexing Your Layout Muscles
- Modernizr
- Fluid searchbox
- CSS Sticky Footer
- W3C CSS3 Flexible Box Layout module
- Nice Flexible navigation menus
- CSS3 Layouts: The Flexible Box Model Basics
- Firefox 4: CSS3 calc()
- The 'calc' function (W3C)
- W3C CSS3 Basic User Interface module
- IE7.js
- W3C CSS3 Template Layout module
- JavaScript (jQuery) implementation of the CSS Template Layout Module
- W3C CSS3 Grid Positioning module
