“Another CSS3 presentation? Really??“
Well, yes, and no…
We’ve all seen tons of presentations, posts, articles and tools showing what CSS3 can do and how to do it, in theory. But each of the ones I’ve seen limit themselves to “what are the cool new features and how do you make them work, where they work”. But that isn’t how reality works.
This presentation will show you how to create several of the most commonly requested design effects using nothing but CSS (well, almost nothing but CSS).
A couple quick notes:
- This will be more of a demonstration than a presentation. All the examples will be live code, and can be found here:
https://aarontgrogg.com/practicalcss3/ - This will be fairly technical (read: lots and lots code!).
- I will expect you have at least a mid-level knowledge of CSS, so please let me know if you have any questions.
Process
This is not an extensive list of every conceivable method for getting CSS3 features across all browsers. My first goal was to get as close to the “spec” as possible. My next goal was to do it as lightly as possible (read: minimum overhead, minimum maintenance, maximum resuability). This meant looking for solutions that could solve multiple issues with one application, if possible.
While doing this, I make use of two fairly new innovations:
- the IE Conditional Comments idea from HTML5 Boilerplate, and
- Modernizr
This is all “doable” without them both, but A LOT easier with them; I highly recommend building them into your current structure.
Examples
Okay, let’s get to the code!