CSS is my most loved syntax. It's simple, it's powerful, and it can make or break a site in seconds. Today, we're going to take a look at CSS3, the latest version of CSS, set to be launched in the near future. This includes some much requested features, and some nice added bonuses too. Without further-a-do, lets dive straight in.

1. Border radius.

We've all seen it over the web. Rounded corners are everywhere. Before CSS3, you either needed to do it with images, or some special (or crazy) JavaScript. No longer. CSS3 has the ability to have rounded corners without the need to get things complicated. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

You can also target individual corners, for a nicer effect:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome. For an example, check Twitter. For more information, check css3.info

2. Border Images

The next feature is a must. Before CSS3, borders had to be of a standard pattern, or just a simple line. Now, you can use your own images and create some stunning effects. This is how we do it:

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

This can also be applied on a per-side basis, allowing seperate images per side for that added sparkle.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Supported in Firefox 3.1, Safari and Chrome. For an example, see Blog.SpoonGraphics. For more information, check css3.info.

3. Drop Shadows!

No more photoshop! No more photoshop! You now don't need photoshop to include drop shadows to your sites! Here's how it's done:

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

To do it on a text element:

text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only). For an example, please visit 24ways For more information, visit css3.info (box) or css3.info (text)

4. Transparency

Before CSS3, PNG's played a vital part in Web Design. Now a CSS3 value lets you do the same, with a lot less time and effort needed. Here's how we do it in CSS now:

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect. Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:

color: #000;
opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes). For an example, visit 24 Ways (RGBA). For more information, visit: css3.info

5. @Font-Face

There has always been a set of safe fonts that can be used on the Web, as you know: Arial, Helvetica, Verdana, Georgia, Comic Sans (ahem…), etc. Now the @font-face CSS3 rule lets you use whatever font you want. Easily. Here's how:

@font-face {
font-family:'Helvetica';
src: url('/images/Helvetica.otf') format('opentype');
}

The rest of the settings are then called as usual:

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10 and IE7 (with lots of fixes: if you are brave enough, you can make font-face work in IE (thanks for heads up, Jon Tan)) For an example, please visit TapTapTap. For more information please visit css3.info

Although CSS3 is still under development, the rules listed here are supported by some browsers right now. Safari in particular has extensive support for these new features. Unfortunately, despite being a top-quality browser, Safari has a relatively low number of users, so it is probably not worthwhile adding extra features solely for this group of users. But with Apple’s Mac computers making their way into everyday life, Safari’s usage is likely to continually increase. Assuming that most users of Firefox will update their browsers, there will soon be a large group of users with support for these new styling rules too.
Google Chrome was released this year. Based on the WebKit engine, this browser has much of the same support as Safari. While Safari makes up a good proportion of Mac users, Chrome has burst onto the scene, making up a decent proportion of Windows users. According to statistics, almost 50% of all Internet users should be able to view these features.

Downsides.

Internet Explorer: 46% of Internet users won’t see these features, so don’t use them as a crucial part of the design of your website. Make sure that secondary options are in place.

Invalid style sheets: These CSS3 features have not been released as a final specification. They are currently implemented with tags that target different browsers. This invalidates your style sheet and if you pride yourself on being "valid" don't use them.

Extra CSS markup: Following the last point, having to add a different tag for each browser to specify the same rule, as well as include the standard rule for the final CSS specification, adds a lot of extra code to your CSS markup. Which means a bigger file, which means a slower site load.

Potentially horrific usage: Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular.