CCS3 has been making a lot of waves over the last several months, and is picking up a lot of support on the internet. It truly simplifies a great deal of things that have historically been major headaches for web developers.

The different browsers still have different implementations until the spec is finalised, but for Firefox, and Webkit based browsers, many of the features are already implemented.

My favourite addition, is the HTML canvas, which I have already used extensively, particularly in my O3D tutorials.

Border radius is another great feature, which does away with the need for cumbersome tables and partial images to create rounded images. All you need now is to add the following style

.roundedcorners {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

Here is an example:
Testing borders

I also like the drop shadows in text, which allow great effects.

.box-shadow {
	box-shadow: 4px 4px 2px #dddddd;
	-moz-box-shadow: 4px 4px 2px #dddddd;
	-webkit-box-shadow: 4px 4px 2px #dddddd;

	text-shadow: 1px 2px 3px #aaaaaa;

}

Here is an example:


Testing shadows



There are many more great additions too, such as better transparency, multiple background images, and multi-column layouts, which will all make web developers lives much, much easier.

Now to find a way to get people to start using these browsers instead of older non-compliant browsers, but that is a different issue entirely….

Share