Last week was Web Directions USA in Atlanta, GA. Real World CSS3 for Designers was the title of the first pre-conference workshop given by an Rubin on CSS3. Of all the sessions throughout the conference I enjoyed this one the most due to the detailed knowledge Dan Rubin shared about CSS3, and the fact that we had all day to drill into CSS3 and periphery topics. Below are links and resources shared throughout the session. I still haven’t yet had time to go though all of them in depth, and will undoubtedly have more to post after I do, but these need to be posted before they get stale.
What was covered:
- Advanced selectors and browser support
- Rounded corners (and how to design for when they aren’t there)
- CSS3 Gradients (and an easy way to create them)
- Text Shadow and Box Shadow (using them to your advantage)
- Bitmaps vs CSS (when to use each and how to choose)
- CSS Transitions (and their potential downsides)
- CSS Animations (and how they compare with Javascript alternatives)
- Browser-specific CSS (aka vendor extensions)
- The future of CSS (experiments and anything which lacks support)
CSS Contents and Compatability
http://www.quirksmode.org/css/contents.html
CSS Examples
- Dan Cederholm’s experiment site he shows at presentations has a good number of CSS3 effects: http://css3exp.com/moon
- Trent Walton’s experimental CSS3 type treatment (requires webkit-friendly browser): http://trentwalton.com/css3/type
- Tim aka Max Voltar – http://thebox.maxvoltar.com
- Hardboiled Web Design – http://hardboiledwebdesign.com
- http://webgraph.com/2010 – Page scaling awesomeness
- http://colly.com – Personal site design implementing Responsive design with media queries
- http://hicksdesign.co.uk
- http://new.edenspiekermann.com/en
- http://newadventuresconf.com/
- http://neography.com/experiment/type1
- http://neography.com/experiment/circles/solarsystem
Recommended Reading
Ethan Marcotte’s article – Responsive Design
Doug Bowman’s – Making the Absolute Relative
Tools
- CSS Edit: http://macrabbit.com/cssedit – Live editing of stylesheets. Seems less jumpy than Firebug (though I’m not a Firebug power user)
- Procssor: http://procssor.com – Restore formatting
- Rounded Corner Style Generator – http://border-radius.com – enter in border radius and select options to render a box with rounded corners
- CSS3 Generator – http://css3generator.com – A great learning tool for CSS3 that quickly shows what’s going on with styles
- CSS3 Maker – http://css3maker.com
- CSS3 Gradient Genterator – http://westciv.com/tools/gradients
- CSS3 Media Queries – http://code.google.com/p/css3-mediaqueries-js – makes CSS3 media queries work in all browsers.
- Less Framework 2 – http://lessframework.com/
- Modernizr – http://www.modernizr.com/ – Detects support for functionality of particular browsers and target those specifically. Good when implementing media queries
- Select[ivizr] – http://selectivizr.com – selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
CSS Effects to Explore
box-shadow
corner-radius
transforms
:before and :after psedo-classes can do cool things
Also…
Apparently IE9 (beta) is good. Who would have guessed?
http://lostworldsfairs.com
http://beautyoftheweb.com
The biggest take away for me at the end of the day was a sense of where I should be focusing my effort and attention when deciding to implement any of the CSS3 recommendation. I haven’t had the time to experiment much with it yet, so this really help to catch me up.