5 Cool Features of CSS3

Tuesday, November 30, 2010

5 Cool Features of CSS3

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.

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 B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like