home
This is a set of conceptual demos, inspired by design cognoscenti from across the Web in my attempts to teach myself the new possibilities in CSS3. Hopefully they're both instructive and useful - I've tried to make sure the examples are realistic and immediately applicable to common design needs.
The intention here is to show off some of the latest CSS capabilities, and as such, only browsers with the most cutting-edge rendering engines will be able to see them in their full glory. For the proper effect, you'll need to use the latest builds of Opera, Chrome, Safari or Firefox. And unfortunately, even they vary a little at this level.
Where necessary, I've used the vendor-proprietary property for certain CSS declarations - these are prefixed with -moz- (for Firefox), -webkit- (Safari/Chrome), -ms- (IE) or -o- (Opera).
These pages are valid HTML5, but in most cases the CSS will not validate. This is because we're using properties that are either legitimately vendor-proprietary, or else appear in CSS3 and therefore aren't checked by the validator.
- Backgrounds
- - multiple background images and gradients
- Rounded Corners
- - imageless, scaleable curved corners
- Drop Shadows
- - imageless drop shadows on text and containers
- Transparency
- - opacity and transparency via RGBa
- Transitions and Transforms
- - responsive page elements
- Animations
- - animations and distortions
- Columns
- - columns for layout
- Generated Content
- - CSS2 and 3 generated content, including counters
- Custom Fonts
- - use custom fonts wherever you want them
- Media queries
- - apply CSS according to your user's display settings
- CSS3 Selectors
- - CSS3 selectors - zebra-stripe tables without JS
Please feel free to take and modify any of the code from this site for your own use. The relevant CSS3 declarations are in large obvious 'CSS' boxes next to each example. Using an extremely clever trick I came across on Ocean Layout, each block contains the 'live' CSS that formats its companion HTML - and it's editable in-place.
Due thanks and credit should be given to AListApart, CSS3 Info, Quirksmode and several others. There's a more comprehensive list of CSS-related sites on my links page.
An extremely good summary of CSS3 browser support is FindMeByIP - and this is probably more up-to-the-minute than the commentary on this site.
about me
I'm Adam Taylor, a wandering Web Developer. I can be contacted via adam (at) mortalwombat (-dot-) org (-dot-) uk. You can also find my CV / Resumé here, should you wish to shower me with riches. And why wouldn't you?