The Designer’s Guide to CSS3
CSS3 has powerful options that are transforming the way sites are being built. I encourage you to dig in, figure out what’s possible, and check out what others are already doing. The more you know what’s possible, the more informed and strategic your design work will be. In this last installment of the series, I’ve got a series of creative examples of how you can use individual new CSS3 elements.
Before we dive in, I must remind you that many of these elements are only supported in the most up-to-date browsers. Depending on your project, they might work perfectly, but you should always consult with your development team before relying on shiny new CSS3 tricks in your designs.
CSS3 download buttons
This awesome download link uses no images. It’s designed purely with CSS and a lot of CSS3: rounded corners, background gradients, drop shadows, custom typefaces and animations, to name a few. It’s a great example of how understanding the technology can lead to a beautiful solution. (You can click on any of these images to see where I found the examples.)
Beautiful signup forms
Gradients gone crazy
The simple CSS3 gradient tools can be pushed pretty far. These slick buttons were texturized and given a metallic look entirely with gradients—no images at all. This kind of solution is great for its flexibility and can easily be re-skined with different colors, sizes and layouts.
I really love the practicality of this example for many reasons. First of all, the default rotated image is simply that: an image rotated in Photoshop. This means the actual image contains an image that is rotated slightly, so the rotated style is there by default (even in old browsers). But when you mouse over the element, it turns a bit more. This interactive enhancement is done using CSS3. The interaction isn’t super important, so it’s OK if it doesn’t work in older browsers. It’s a great example of how to apply the new options with a practical mindset and not a purist mentality. Building beautiful and functional sites sometimes means mixing new and old.
This fantastic example combines new custom typography techniques with the age-old practice of image-based text.
The really large block of red text starting with “Pixels & paragraphs” is rendered as an image. Sure, they could’ve tried to style this using CSS3 and could’ve likely come close. But the amount of code required to replicate the careful styling of text could result in more painful code. In such situations it can simply be easier to create an image and move on. Especially on something like this heading section, which will not likely be updated very often.
The custom typeface used for the title text beinging with “Hello. My name is…” is rendered using a custom font and @font-face techniques. In this case, using an image would result in text that’s a nightmare to update. It’s better to sacrifice the total control of hand-tweaking letter and word spacing and use a web based approach instead. The end results are easy to tweak in the CMS, but are still styled to match the overall site. Again, a perfect balance between old and new.
One of the safest ways to use the new CSS3-based styles is in subtle details. In this example, the large banner regions are styled with rounded corners and drop shadows. These details add style and beauty to the design, but they’re by no means necessary for the page to function or even to look great. Code based techniques can add a level of style without having to create more images and implement complex rounded corner plugins. They simply work for new browsers and are ignored in older ones.
There are tons of sources to get inspired on what is possible with CSS3. Here are a few of my favorites: