CSS3 Techniques You Should Know

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!
If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

• Mozilla/Firefox/Gecko: -moz-
• Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.

Drop Shadows

The drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset keyword that will create an inset shadow.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;

Transform

With the transform style, you can make elements appear to “grow” when hovered. With a value above 1 added to scale, the element will increase in size. On the other hand, a value below 1 will cause the element to decrease in size. Along with scale, their are many different transforms available to use. Visit Firefox’s developer page to see what else you can use.
-moz-transform: scale(1.15); -webkit-transform: scale(1.15);

Transform Demo:

-webkit-box-shadow: #333 3px 3px 4px;