CSS3 is full of cool new features. For example, last week we talked about CSS3 colors. In this post, I’d like to talk about some other cool features that CSS3 has to offer, and how you can access some of them now.

Border-Radius

I’m going to start out with an oldie but goodie. Border-Radius has been making the rounds for a while – it’s basically a way to get curved corners on a box. Recent versions of Mozilla Firefox, Chrome, and Safari all support Border-Radius, and, although Opera supposedly supported it at one point, current versions of Opera do not. It has been reported, though, that Opera 10.5 will support this again.

Here’s how to make it work:

.element {
	border-radius:10px; /* Official statement */
	-moz-border-radius:10px; /* For Firefox */
	-webkit-border-radius:10px; /* For Safari and Chrome */
	-o-border-radius:10px; /* Reported statement for Opera 10.5 */
}

Border-radius takes up to four numerical arguments (meaning in px, pt, or em), separated by spaces. The arguments denote the radius for the corners starting from the top-left corner and circling clockwise. If less than four arguments are given, then the arguments are duplicated for the remaining corners, similar to what happens with padding and margin when less than four arguments are given.

If you wanted to apply a rounded corner to only one corner, it is possible with individual statements. These statements differ between Firefox and Webkit-based browsers:

Corner	Firefox	Webkit
Top-Left	-moz-border-radius-topleft	-webkit-border-top-left-radius
Top-Right	-moz-border-radius-topright	-webkit-border-top-right-radius
Bottom-Right	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
Bottom-Left	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius

If you want rounded corners on a cross-browser basis, there have been numerous hacks to get it to work. I recommend using the jQuery Rounded Corners Plugin.

Box-Shadow

Box-Shadow is a fun one. It adds a shadow to the element affected, but it is capable of a great deal of customization.

Box-Shadow takes up to five arguments:

1. Horizontal offset
2. Vertical offset
3. Blur radius
4. Spread
5. Color

The first two arguments are required, as is the last one. Blur radius and Spread are optional. The first four arguments take numerical value inputs, and the last one, obviously, takes a color input.

How the offsets work is fairly obvious. A positive horizontal offset means that the shadow is offset to the right of the element, and a negative horizontal offset means that the shadow is offset to the left. Similarly, a positive vertical offset means the shadow is offset toward the downward direction, and a negative vertical offset offsets the shadow upwards.

The color argument can be in hexadecimal format, RGB format, or, if the browser supports it, RGBA, HSL, or HSLA.

Blur radius and spread are interesting concepts.

The Blur radius argument is how big the blur of the shadow is. An input of 0 for the Blur radius means that the shadow will have solid edges, much like the element it is shadowing. The higher the value of the input, the more blurred the edges are. However, because you can’t have a more solid edge than 0, you can’t pass a negative number for Blur radius.

The Spread argument can expand or contract the shadow. A positive value means that the dimensions of the shadow are bigger than the dimensions of the element, while a negative value makes the dimensions smaller. An input of 0 gives the shadow the same dimensions as the element.

The CSS statements for Box-Shadow are as follows:

.element {
	box-shadow: 10px 10px 5px 0 #888888; /* Official statement */
	-moz-box-shadow: 10px 10px 5px 0 #888888; /* For Firefox */
	-webkit-box-shadow: 10px 10px 5px 0 #888888; /* For Safari and Chrome */
}

As you can see, Opera does not support Box-Shadow yet, but, like Border-Radius, it is reported that Box-Shadow will be supported in Opera 10.5.

Transform

I’m actually kind of scared of Transform and what it means for the future of web design. Traditionally, layouts have been done in rectangular, blocky grids, because that’s what CSS supported: rectangular, blocky grids. Transform kind of turns that idea on it’s head. Or side, or corner. And skews it.

Basically, transform can do a lot of stuff to an element. Here’s a basic list of what it can do: rotate Rotates the element clockwise by the specified angle. scale Scales the element by the specified decimal value: a value of >1 will make the element bigger, while a value of <1 will make the element smaller. skew Skews the element by the specified number of angle. translate Shifts the element by the specified numerical value.

All these are passed to transform in the following fashion:

.element {
	transform: command(comma-separated-inputs);
}

For example, the command for translating an element 10px to the right and 20px down would look like this:

.element {
	transform: translate(10px,20px);
}

Rotate takes a single parameter: the angle that the element is rotated. The angle can be specified in either degrees or radians; the distinctions is made by appending deg or rad after the number. The appendix is required, or the transform will not occur.

Scale takes one or two input. If only one input is given, it is applied in the horizontal direction, while the second input would be applied in the vertical direction. The arguments are given in decimal format, meaning that an input of 1.2 means the element is scaled to 120% in the applicable direction, while an input of .75 means the element is scaled to 75% in the applicable direction.

Skew, like scale, takes one or two inputs. Similarly, the first input is applied horizontally, while the second input is applied vertically. Inputs are given as angles, meaning that the values must be appended with deg or rad, like rotate.

Translate, like the previous two, takes one or two inputs with the same directional applications. Inputs are given in px, pt, or em.

Scale, Skew, and Translate also come with X and Y only versions, that look like this:

• scale – scaleX, scaleY
• skew – skewX, skewY
• translate – translateX, translateY

Applying multiple translations is done like this:

.element {
	transform: skew(5deg,-15deg) scale(1.2, 1.5) rotate(10deg);
}

You can see the effects of the multiple translations, along with Border-Radius, Box-Shadow, and the CSS2 feature Text-Shadow:

Transform is supported by newer versions of Firefox, Chrome, Safari, and will be supported in Opera starting from Opera 10.5:

.element {
	transform: [commands]; /* Official statement */
	-moz-transform: [commands]; /* For Firefox */
	-webkit-transform: [commands]; /* For Safari and Chrome */
	-o-transform: [commands]; /* For Opera 10.5 */
}

I hope you’ve enjoyed reading this wall of text about the new CSS3 features. Feel free to subscribe to our RSS feed or follow us on Twitter for more goodies like this in the future.