Chris Walton

Best CSS3 Techniques

CSS3 is one of the greatest tools in web designer and coders arsenal, even though CSS3 is not fully supported yet, many web developers are starting to use many of the new techniques it brings to the table. CSS3 has taken a very large step forward in helping web developers get away from importing mass amounts of images/JavaScript and making it possible to do this only by using pure CSS.

It should be noted that neither IE6, 7 nor 8 support any of the CSS3 properties (with the exception of @font-face). IE9 has much better support for CSS3 and is thought of as an important step forward in bringing IE in line with the other choices on the web.

Border Radius

The ability to have rounded corners without images and JavaScript is one of the most sought after features of CSS3. Having to make images for each corner or importing a new library just to get the nice round edge will be a thing of the past with CSS3 Border Radius.

Box Shadow

A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved using a repeated image around the element. However, with the property box-shadow this can be achieved by writing a single line of CSS code.


Say goodbye to limited web safe fonts! CSS3′s @font-face feature allows you to use absolutely any font you like to in the design of your web pages. @font-face is supported by all the current browsers, and unbelievably even the older versions of IE. Free fonts are available at the Google Web Fonts Directory and Font Squirrel or you can us the @Font Face Generator to convert any font you want to a web font format and generate the CSS for use in your site.

Text Shadow

The text shadow property is another tool that designers can use to add something extra to a webpage adding drop shadows to the text on a webpage. Similar to the box-shadow property, prior to CSS 3, this would be done by either using an image or duplicating a text element and then positioning it.


Probably the favorite feature to come in CSS3 is opacity. It is also probably the most already used CSS3 feature as well. There have been ways to use opacity in the past with IE hacks and other methods but the new CSS3 property will allow it to me done much easier.

Multiple Backgrounds

In the past, having layered backgrounds required you to create more than one element. But now, with CSS3 you can have multiple backgrounds on a single element. This will eliminate a huge annoyance that we have had to deal with in the past.

Multi-Column Layout

Another CSS3 feature that developers, including myself are very eager to start using is the Multi-Column Layout. It offers a new way to arrange text in more of a “news paper” type way. You have the choice to pick the amount of columns, the column width, column gap width, and column separator. A feature like this was not possible before CSS3.

It will still take a while before CSS3 is complete, even longer till every browser supports it (IE). But, we can start using them in are designs for browsers that do support them and just not have the extra features for the older browsers. All in all, just get excited, CSS3 will move the web development world in a good direction.