9 CSS3 Properties You Can Use Now

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.

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.

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 */
-webkit-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */

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).

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

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.

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

DEMO

DOWNLOAD

Browser support for @font-face: Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+

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.