CSS3 Design with HTML5 Resources

Panelists

Christopher Schmitt

• @teleject
• christopherschmitt.com
• Book: The CSS Cookbook

Stephanie Sullivan

• @stefsull
• W3Conversions
• Book: Mastering CSS with Dreamweaver CS4

Zoe Mickley Gillenwater

• @zomigi
• zomigi.com
• Book: Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
• Book: Stunning CSS3: A Project-based Guide to the Latest in CSS

Resources

Our Session Demo

• Party locator with geolocation (Due to the dynamic nature, there will be no listings in "Current parties" or "Starting soon" once SXSW is completed.)

General CSS3 resources

• westciv.com CSS3 generators
• CSS3, Please! The Cross-Browser CSS3 Rule Generator
• CSS3 Generator
• Modernizr

CSS3 @font-face

• FontSquirrel @font-face generator
• Mo’ Bulletproofer @Font-Face CSS Syntax
• How to use CSS @font-face
• Rich Typography On The Web: Techniques and Tools

CSS3 visual effects

• Take Your Design To The Next Level With CSS3
• Using Text Shadow in HTML/CSS
• CSS3 borders, backgrounds and box-shadows
• CSS3 box-shadow property
• The CSS3 border-radius property
• Meet a ninja living in browsers (on border-image)
• Introducing CSS Gradients and Safari Visual Effects Guide: Gradients cover Webkit's gradient syntax
• Mozilla Developer Center: Using gradients covers Mozilla's gradient syntax
• What You Need To Know About Behavioral CSS
• CSS Animation
• 24 Ways CSS Animations
• Remembering: The CSS3 Multi-Column Layout Module
• A short introduction to media queries in Firefox 3.5 (applies to other browsers too)
• Determine iPhone orientation using CSS (on media queries)

CSS3 selectors

• Taming Advanced CSS Selectors

CSS & HTML5 support information

• RGBa Browser Support
• CSS3 support charts
• "When Can I Use" support chart
• IE Compatibility and filter information

General HTML5 resources

• HTML5Doctor
• Dive Into HTML5

HTML5 semantic markup

• HTML5 boilerplates
• The section element
• HTML 5 structure—HTML 4 and XHTML 1 to HTML 5
• How to get HTML5 working in IE and Firefox 2

Geolocation

• Entering The Wonderful World of Geo Location

Non-compliant browser hacks & tools

• Modernizr
• Cross browser rotation transformation
• Border Radius tool
• Rounded corners with jquery
• Text shadow in IE with jquery
• Browser transforms and tools for IE
• Javascript CSS Selector engine
• Super Selectors
• Jquery Selector engine