5 Cool Features of CSS3

Matcha Design - Tuesday, November 30, 2010

Like HTML5, CSS3 is currently in draft form, and has varied support across the major browsers. All of the major browsers are at least developing support for the existing CSS3 properties, however. CSS3 goes hand-in-hand with HTML5 to make pages simpler by reducing scripts and plugins, and also to separate content from presentation from behavior, as much as possible. Here are a few of the really cool things that CSS3 can do.

Matcha Design Tutorial Series - CSS3

  1. border-radius, box-shadow, text-shadow

    The border-radius property allows boxes to have rounded corners. How to create nice-looking, cross-platform, flexible rounded corners is a problem that has plagued designers since time immemorial. Now CSS solves that problem. The box-shadow and text-shadow properties render drop-shadows behind an element or the text of an element, respectively. All of these properties add nice, subtle touches that could be difficult to implement in the past.

  2. Transitions

    Transitions allow changes to properties which don't occur as soon as the selector applies to an element. For example, you can set the text color of a link to slowly fade to a new color on hover using transition-duration. Or to change suddenly after a short delay, using transition-delay. Mouse over this sentence for a sample of how it works on your browser. The main navigation menu of our site and our work section use transitions heavily.

  3. Transforms

    The support for transforms varies quite a bit between browsers, but they should become more unified as CSS3 transitions to a final standard. Transforms can be used to rotate, scale, skew, and move elements. 3D transforms are starting to emerge as well. These are especially cool. Mouse over this sentence to see if your browser supports 3d transforms. More really cool examples on the Surfin' Safari blog.

  4. Multiple background images

    This allows an element to have different background images applied in different ways. For example, a picture frame could be made by applying different images for the sides and corners. I like this one because it removes a lot of layering involved with complicated backgrounds. Our home page uses this technique to apply the subtle shadows on the main wall behind the large feature, while using a small tile for most of the wall. A fallback exists for browsers without support for multiple background images.

  5. @font-face

    This mechanism has actually been around for quite some time, but it was never officially part of CSS, and it only worked for Internet Explorer. Now it's part of the working draft of CSS3. It allows the developer to specify a font for text that isn't on the end-user's system, by having it available for download. The user downloads the font just as if were an image or any other part of the page, and the browser uses it for the appropriate text on the document.

There are a huge number of really awesome examples of CSS3 techniques out there. A simple web search will turn up more than you probably have time to look at. I encourage you to explore.

About Matcha Design
Matcha Design is a full-service creative agency specializing in web designprintidentitybrandinginterface designvideo productionstill photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.