Designer’s Guide to CSS3: 8 Examples to Inspire

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.)

Fly-out navigation

This beautiful navigation requires no JavaScript—it’s built entirely on CSS3. This is amazing because historically the only way to accomplish this sort of interaction was with JavaScript. You have to try it out to understand why it’s so cool. Again, there’s lots of CSS3 here, including gradients, transitions and drop shadows.

CSS3-based buttons

These tasty buttons were built using some creative approaches to CSS. Some use images for small supporting details, but overall these buttons were built with CSS—no JavaScript needed. They demonstrate that pretty awesome designs can be created using these new techniques.

Beautiful signup forms

Your web creations will probably have to rely on some JavaScript to achieve the desired results, but it doesn’t mean you have to go overboard with it. In this example, the styling is done entirely with CSS, and the JavaScript provides the muscle for complex interactions (like form validation). Each technology is allowed to do what it does best. The results are simple, fast and absolutely beautiful.

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.

Rotated images

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.

Custom typography

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.

Subtle details

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.

More inspiration

There are tons of sources to get inspired on what is possible with CSS3. Here are a few of my favorites:

CSS3 Resources from MyDesignShop.com

One thought on “Designer’s Guide to CSS3: 8 Examples to Inspire

  1. Pingback: HOW Magazine Blog | Top Design Links from 2011

COMMENT