Practical CSS3 for Web Designers

Designers have been using basic CSS3 techniques to enhance their designs for several years now, but cross-browser incompatibilities and lack of practical examples have slowed its progression in the mainstream design world. In this tutorial, I explore and demonstrate some of the more practical aspects of CSS3 and provide realistic examples, resources, advise and a compatibility guide.

The demo page showcases a number of CSS3 techniques including:

  • Gradients (Radial and Linear)
  • “Rounded” Border Images
  • Border Radius
  • Drop Shadows (Box and Text)
  • Transforms
  • Keyframe Animations
  • Transitions
  • Image Masking
  • :target Pseudo Selector
  • Multiple Backgrounds
  • CSS Columns

Examples in the demo include:

  • Image gallery with randomized CSS transitions (supplemented with jQuery)
  • Image-less 3D Bar Chart
  • Pure HTML / CSS Accordion links
  • Navigation with CSS animated hover effects
  • jQuery powered “View Mode” with CSS3 visual enhancements

After exploring the demo use the “CSS View Mode” feature to see example code, my comments and suggested resources / examples for each example.

The demo:

View DemoDownload Source

Final thoughts

Although the upcoming FireFox 3.7/ 4.0 is said to include support for CSS transitions, you will need to use a Webkit browser for now to see some of the advanced examples. I recommend updating to the latest version for full support. I designed this demo for Webkit, Firefox 3.6+ and Opera 10.5.3 and have intentionally used browser vendor prefixes accordingly. There are, of course, other browsers which offer (limited) support of CSS3 properties but this demo is geared towards mainstream browsers (that is my way of saying don’t use IE on this demo).

UPDATE 5/28/10: Added Opera support to demo page, see my comment from 5/28 below.

20 comments on “Practical CSS3 for Web Designers

  1. It’s a little disappointing that like many example sites you chose to ignore the actually CSS properties ( for instance leaving out border-radius while using proprietary ones like -moz-border-radius and -webkit-border-radius ). Browsers like Opera do support many of these things without the proprietary properties, and omitting them seems to portray an incomplete picture of what browsers offer support.

    Furthermore, this could begin instilling bad habits in early adopters who follow these examples then leave the samples in the dust – which could lead to more roadblocks in adoption as misconceptions are spread.

    • Mike,

      While I do agree with your general point, I did touch on my reasoning for this in the article. To elaborate, the vast majority of users with standard compliant browsers are using FireFox or a Webkit browser. In this write up, many of the examples already use 5-10 lines of markup for the CSS3 effects and adding a 3rd definition for less than 1% of the world would only complicate and clutter the code further. I do tend to revise my write-ups as advancements are made so you can bet that when/ if Mozilla & Webkit drop reliance on prefixes, it will be reflected here.

      Furthermore, as a code minimalist, I do want to state for the record am against the idea of vendor prefixes. I do, however see both sides of the issue and have mixed feelings about the declarations that vary from browser to browser e.g. Gradients.

      There are many good debates and write ups on this subject but I think this one is very informative:

  2. Due to the popularity of this write up, and a nice email from the folks at Opera, I’ve decided to add support for Opera browsers to the demo.

    Initially, I was concerned that adding too much markup for the sake of compatibility might dilute the message but I feel that it is important to show people who might be getting their feet wet in CSS3 and those who are looking for current standards the full picture. Additionally, many of the non-prefixed selectors that work in opera, such as border-radius will eventually (hopefully!) work in IE9.

    The updated syntax can be seen on the demo page and in the source file.

    Note: I did not add support for transitions and animations to the demo because of stability issues that occurred during testing in Opera 10.3.5. They are supported in Opera 10.5+, however. If you want to explore this topic further on your own, please visit Opera’s CSS3 transitions and 2D transforms documentation.

  3. Virtually all of what you say happens to be astonishingly appropriate and that makes me wonder the reason why I had not looked at this in this light previously. This particular piece truly did turn the light on for me as far as this particular subject goes. However at this time there is actually one particular point I am not necessarily too comfy with and whilst I try to reconcile that with the main idea of the position, let me observe exactly what all the rest of your visitors have to point out.Very well done.

  4. I do love the manner in which you have framed this specific challenge plus it does indeed present me personally some fodder for consideration. Nevertheless, from just what I have observed, I simply just trust as the actual responses pile on that folks stay on point and don’t embark upon a soap box of the news du jour. Anyway, thank you for this exceptional piece and even though I can not necessarily concur with this in totality, I respect the perspective.