9 CSS3 Properties You Can Use Now

If you’ve looked at any of the stuff to be included in CSS3, you were no doubt bouncing off the walls in excitement until you remembered how long it tends to take some browsers to support that kind of stuff.
But some good news: Quite a bit of this CSS3 awesomeness can be used right now to spice up your designs. Some (most) of it will not render in all browsers equally (generally those of the IE variety), but websites don’t need to look the same in every browser–nor should they. Just because IE6 users can’t see some fancy effect doesn’t mean everybody shouldn’t. Similar to how those watching TV on a standard television will not be able to see HD, users on older browsers need not get the same experience as those on newer browsers as long as they see nothing wrong with the site.
But enough ranting and onto the good part. CSS3 properties you can use now and how to use them:

1. Text-shadow

The text-shadow property is probably one of the most commonly used aspects of CSS3, likely because of it’s extremely easy setup (it’s almost too easy…).
For a text-shadow, the property is used as follows:

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

The first and second values represent the shadow offset, the third the blur radius, and the last value the color of the shadow.
For tips on effectively using shadows in your designs, check out one of my previous articles, The Shadow World: CSS3 Text-Shadow and Reality.
Browser support for text-shadow: Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+

2. Box-shadow

The box-shadow property is used in a way very similar to text-shadow, but it adds shadows to the elements as a whole rather than to the text inside them:

box-shadow: 5px 5px 10px 10px #000;

The first two values are the offset of the shadow, the third the blur radius, and the fourth value the spread radius. The last value is, of course, the shadow color.
Browser support for box-shadow: Safari 3.1+, FireFox 3.5, Chrome 1.0+

3. Box-sizing

The box-sizing property is one of the most under-appreciated yet widely-supported properties in the CSS3 spec.
The box-sizing property is quite simple, and it accepts three possible values: content-box, border-box, or inherit. This declares how an element’s size is to be rendered:

box-sizing: content-box | border-box | inherit;

In properly-behaving browsers, all elements are displayed as content-box by default — padding and borders are rendered outside the specified width and height, so an element with a width of 20px with a 1px border and 5px of padding will actually be rendered as 32px wide (20 + 1 + 1 + 5 + 5).
However, by declaring the box-sizing property to border-box, the padding and borders are rendered inside the element. So, our example from earlier would be 20px wide total, with 10px of that element taken up by borders and another 2px taken by padding. This can be extremely useful when using percentage-based widths in your layouts.
Browser support for box-sizing: IE8+, Safari 3.1+, FireFox 2.0+, Chrome 1.0+, Opera 9.6+

4. Columns

The columns property is also fairly easy to setup and makes for great magazine-style layouts. Both Mozilla and Webkit browsers require prefixes before the property, so setting an element to render its content in multiple columns works as follows:

-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */

-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */


This tells the element that you want the content displayed in 2 columns, each 250px wide. Either of these values can also be set to auto, which allows it to be determined based on what best fits with the other value.
But what if you want custom gutter sizes and dividers? No problem, as we have column-gap and column-rule coming to the rescue:

column-gap: 25px;
column-rule: 1px solid #000;

-moz-column-gap: 25px;
-moz-column-rule: 1px solid #000;

-webkit-column-gap: 25px;
-webkit-column-rule: 1px solid #000;


This will place a 25px gap between our columns with a 1px solid black line running down the middle of the gap. There’s even more you can do with CSS3 columns, and I’d recommend that those interested checking out this article for more goodness.
Browser support for columns: Safari 3.1+, FireFox 3.5, Chrome 1.0+

5. Border-radius (rounded corners)

Because everybody likes rounded corners, the CSS3 spec contains the popular border-radius. Mozilla and Webkit browsers require their standard prefixes, so to add rounded corners with a 10px radius to an element, use the following:

-moz-border-radius: 10px; /* For FireFox */
-moz-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */


For slightly more advanced usage (using on only select corners), check out this excellent article.
Browser support for border-radius: Safari 3.1+, FireFox 2.0 (non-antialiased), FireFox 3.0+, Chrome 1.0+ (non-antialiased)

6. Border-image

The border-image property is not used nearly as much as border-radius (probably because the syntax is somewhat hard to understand). However, it can be used for some awesome effects and John Resig provides a fairly good explanation of how it can be used through the following example:

-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;


Basically, the property declares an image to be used before telling the browser how to clip and stretch different sections of it. Check out his full article for more examples and details.
Browser support for border-image: Safari 3.1+, FireFox 3.5, Chrome 1.0+

7. @font-face (web font embedding)

While not technically a property, the CSS3 @font-face declaration has been receiving quite the attention as of late. Håkon Wium Lie, the original proposer of CSS, wrote a must-read article for A List Apart all about @font-face. Essentially, this allows developers to embed fonts in their pages that can be called by the simple font-family property.
To embed a font, simply add an @font-face declaration as follows:

@font-face {
font-family: "My Awesome Font";
src: url(MyAwesomeFont.otf) format("opentype");
}


This tells the browser that whenever the font “My Awesome Font” is used, pull it from “MyAwesomeFont.otf.” Simple and brilliant, really. So then to use our font, we just declare like we would any other font:

h1 { font-family: "My Awesome Font", sans-serif; }

There are a couple things to note, however. Firstly, and most importantly, make sure the font you are using has a license that allows font embedding. There’s a fairly decent list of legal fonts over here, and Typekit will be another solution that looks promising.
The other thing to note: Fallbacks. Cufón and typeface.js are both good options for when @font-face isn’t supported. Kilian Valkhof has a great article on combining Cufón and @font-face.
Browser support for @font-face: Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+ (sort of)

8. RGBA color

While actually a value and not a property, rgba() is also worth mentioning (and using!). While generally colors have been declared using hex values (e.g., #000000 for black) or RGB values (rgb(0,0,0) for black), CSS3 has now added a new option: RGBA.
This works identically to RGB color with the addition of a fourth parameter declaring opacity. So, if you want to create a black background with 50% opacity, simply do the following:

background: rgba(0, 0, 0, 0.5)

While this (of course) will not work in IE, there’s a great (though slightly complicated) article on creating bulletproof, cross-browser RGBA backgrounds using some filters and PNGs.
Browser support for rgba() (without filters): Safari 3.1+, FireFox 2.0+, Chrome 1.0+

9. Transitions

Ever wished you could do transition effects with CSS? Well, now you can using the CSS3 transition property. Webkit browsers (mainly Safari and Chrome) currently support it and do so with the -webkit- prefix:

#element {
opacity: .7;
-webkit-transition: opacity 1s linear;
}
#element:hover {
opacity: 1;
}


The transition property is actually shorthand for transition-property, transition-duration, and transition-timing-function. Our example code above thus tells the browser that when #element’s opacity changes, do a 1-second linear transition.
These transitions can be applied to any property (and even multiple ones at the same time!), such as padding and background, for instance:

#element {
background: #000;
padding: 5px;
-webkit-transition: background 1s linear;
-webkit-transition: padding 1s linear;
}
#element:hover {
background: #FFF;
padding: 20px;
}


For more advanced usage, check out the Webkit blog.

Go and use the future!

CSS3 brings some awesome stuff to the table, and now is the time to start using it. As the web development community gets more and more excited about CSS3, Mozilla and Webkit browsers are quickly adding more and more support for new properties, declarations, and selectors. So take advantage of it!