The design and styling elements that make up the Web 2.0 mantra have been defined by—among other things—rounded corners, transparency, and drop shadows. These three concepts have been key in many CSS-driven web applications or sites. (For examples of some great CSS-driven work, check out cssvault and cssBeauty.) Following the CSS2 recommendation, for years we’ve been using a combination of code and images to make these types of things possible.

My colleague, Torrey Rice, has touched upon unofficial CSS advancements in Safari 3.1 in his discussion about CSS animations, so I’ll focus on advancements that are part of ongoing CSS3 drafts. While CSS 3 as a whole is much maligned, we can use some of the properties that have already been implemented in today’s browsers with just a few simple lines of CSS. Dijit Themes for the Dojo Tooolkit already take advantage of these enhancements where it makes sense. Of course, you can also customize or write your own theme taking advantage of CSS3 wherever possible.

We’ll be taking a look at a few examples of what you can do with some of the CSS3 properties later in this article, but first, a very brief introduction to layout engines and prefixes.

Layout Engines

A layout/rendering engine is the foundation upon which web browsers, email clients, or other applications that require the presentation of web content are built. In simplest terms, these engines read HTML, CSS, JavaScript, and image files and paints the user’s screen (or printer) with its formatted output.

Prefixes

CSS3 support is still in the early stages of implementation across browsers, and to encourage forwards-compatibility, unique/experimental/vendor-specific implementations exist, especially in the case of an unfinished moving target. This means that writing a rule for something like border-radius (which we’ll get to below) is done differently for different engines. Each major engine has picked a unique prefix available to use in cases where you need to be really specific with your rule(s) due to implementation differences.

Below is a listing of the major layout engines in use today, and their associated prefix, web browser, email client, or application:

Layout Engine Prefix Browser, Email Client, or Application
Gecko -moz- Firefox, Mozilla Application Suite (SeaMonkey), Thunderbird, Camino
KHTML -khtml- Konqueror
Presto -o- Opera, Nintendo Wii Internet Channel
Trident -ms- Internet Explorer, Outlook Express
WebKit -webkit- Safari, Apple Mail, Google Chrome, Adobe AIR, OmniWeb

What’s the Catch?

And now for a bit of bad news. Not surprisingly, Internet Explorer—the most used web browser—and its Trident layout engine aren’t discussed much here in regards to support for CSS3 features. While the jump from IE6 to IE7 brought us the ability to use alpha transparent PNG images (and numerous other fixes), support for the advances in CSS3 is limited. Microsoft has a preliminary CSS compatibility document showing that even in IE8, many of the CSS3 properties that other layout engines have already implemented aren’t supported. Even the opacity setting is not going to make the cut in IE8 (though you can use its proprietary filtering capabilities). As of today, Internet Explorer is clearly lagging behind the other major browsers with regards to CSS3 and other CSS experimentation.

Ok, now, with all of that information out of the way, let’s dive in with some examples of the power of CSS3, shall we?

Example: Rounding Corners with Border-Radius

CSS3 allows you to round corners in box items using the border-radius property. This is a very, very handy tool for easily rounding corners, and sans images to boot. No Photoshop required. Observe:

Using the CSS3 border-radius property to round all four corners of this box.

If you’re not viewing this page with a browser that supports the border-radius property, here is a screenshot from Safari 3.2.1:

roundall.png

Here’s the CSS:

.boxRound {
	background-color: #F4F4F4;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #CCC;
	padding: 10px;
}

Notice that we are setting a rule that gives a gray border with a 5px radius. We use the vendor-specific format for the WebKit, Gecko, and KHTML engines to parse, and also put the non vendor-specific border-radius in there for future reference. All engines that do not support border-radius do not get the round corner treatment.

While a 5px radius on each corner is nice, what if you only want to have the radius applied to the top corners? Easy!

Using the CSS3 border-radius property to round only the top two corners of this box.

If you’re not viewing this page with a browser that supports the border-radius property, here is a screenshot from Safari 3.2.1:

roundtop.png

Here’s the CSS:

.boxRoundTop {
	background-color: #F4F4F4;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-khtml-border-radius-topleft: 5px;
	-khtml-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #CCC;
	padding: 10px;
}

Did you notice the differences in the above code example for KHTML and Gecko vs. WebKit? Yes, this is where the vendor-specific implementation stuff we discussed earlier comes into play. While we are achieving the same overall affect, the process to make that happen is a bit different:

Gecko:

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

KHTML:

-khtml-border-radius-topleft
-khtml-border-radius-topright
-khtml-border-radius-bottomleft
-khtml-border-radius-bottomright

WebKit:

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

Example: Transparency with Opacity

Transparency can create some really great effects. While you don’t want to overuse it, in the right instances, have a semi-opaque element adds an interesting touch to your site or application. Most often, you see transparency used within web applications for lightbox type of effects, or upon a dialog popup. While it’s extremely easy to adjust transparency for images using Photoshop, being able to do it with only CSS is really simple using the opacity property, and is a very powerful weapon to add to your CSS arsenal:

Using the opacity property to create the transparent look for this block of text.

If you’re not viewing this page with a browser that supports opacity, here is a screenshot from Safari 3.2.1:

opacity.png

Here’s the CSS:

	.opacity {
	background-color: #F4F4F4;
	border: 1px solid #CCC;
	position: relative;
}

.opacity span {
	background-color: #000;
	height: 100%;
	width: 100%;
	line-height: 50px;
	text-align: center;
	position: absolute;
	opacity: .5;
}

In most browsers, you can use the property opacity:x for transparency, while IE uses filter:alpha(opacity=x). In most browsers, opacity can be a value from 0.0 – 1.0. Lower = more transparent. In Internet Explorer, the opacity can be a value from 0 – 100, where again, a lower value makes the element more transparent.

Example: Text ‘Inset Effect’ with Text-Shadow

A trend towards having text with an ‘inset effect’ was popularized by Apple with its website and Leopard operating system. While not difficult to achieve this affect with Photoshop, being able to do it with only CSS is really simple using the test-shadow property:

Using the text-shadow property to create the ‘inset effect’ for this block of text.

If you’re not viewing this page with a browser that supports text-shadow, here is a screenshot from Safari 3.2.1:

textshadow.png

Here’s the CSS:

.textShadow {
	background-color: #BABABA;
	border: 1px solid #888;
	padding: 10px;
	text-shadow: 1px 1px 1px #FFF;
}

When using the text-shadow property as shown above, the first 1px setting sets the horizontal offset, in this case 1px to the right of the text. A negative number puts the offset to the left. The second 1px sets the vertical offset, 1px below the text. A negative number here puts the offset above the text. The third 1px setting sets the blur of the shadow, 1px in this instance. And finally, the #FFF color is set to give the text a white shadow. We are not using any vendor-specific implementations here; text-shadow is currently supported in the Safari, Firefox 3.1 (still in the beta phase as of this writing), and Konqueror browsers.

Note: text-shadow is not new to CSS3. It was originally proposed in CSS2, but was removed from CSS 2.1 due to lack of existing browser implementations.

Example: Drop Shadow with Box-Shadow

The good old box/drop shadow has been a staple of Web 2.0 from the beginning. Normally this affect is achieved using a combination of image(s) and placement with CSS and can get a bit messy; the CSS3 box-shadow property comes to your rescue:

Using the box-shadow property to create the drop shadow for this text block.

If you’re not viewing this page with a browser that supports the box-shadow property, here is a screenshot from Safari 3.2.1:

boxshadow.png

Here’s the CSS:

.boxShadow {
	background-color: #F4F4F4;
	border: 1px solid #CCC;
	padding: 10px;
	-moz-box-shadow: 7px 7px 7px #666;
	-webkit-box-shadow: 7px 7px 7px #666;
	box-shadow: 7px 7px 7px #666;
}

Similar in usage to the previously mentioned text-shadow property, box-shadow accepts three lengths and a color as attributes. Per the example, the first 7px setting sets the horizontal offset, in this case 7px to the right of the box. The second 7px sets the vertical offset, 7px below the box. The third 7px setting sets the blur radius of the shadow, 7px in this instance. A higher number here creates a more blurred shadow. And finally, the #666 color is set to give the text a gray shadow. We are using the vendor-specific implementations for Gecko and WebKit here; box-shadow is currently supported in the Safari (versions 3 and up), and Firefox 3.1 (still in the beta phase as of this writing).

Conclusion

We’ve taken a brief glimpse into harnessing some of the powerful properties and selectors of CSS3 that are already adopted throughout different layout engines and browsers, and have shown that we can get more efficient and creative with our use of CSS. The CSS3 recommendation is still very much a work in progress; however, we can still take advantage of the early adopted features in supported browsers and let those that have not yet provided support gracefully fall back on older recommendations. We can still enjoy some of the early enhancements that browser vendors have provided us to simply development and design of great user experiences.