CSS

Cool CSS3

Craig Bullock 6th Apr 2010

This is such a great time to be a web designer or developer. The technology and techniques that are available today could of only been imaginable a few years back. Amoungst these fantastic technologies that are now readily available is CSS3.

The CSS3 specification has actually been around for a while. You are probably thinking what has been the hold up then? Well the browsers that are suppose to implement the CSS3 specification have dragged their feet a little (mentioning no names ahem IE), but they are now finally starting to get there act together. It can now be safe to presume that a large percentage of your users are using a browser that can render CSS3 well.

So to get down to the nitty gritty of CSS3. I am going to go through a few of the best features that you can use now in your projects.

Before we get on to the examples though, you should know that the browsers have only implemented some of the CSS3 modules as experimental support. What each tends to do is provide a vendor specific prefix that only that browser will listen to. So the way to work is to really include all of the vendor specific prefixes above the what will be final property. This way the browsers will interpret the experimental styles first until they have full support for the module. i.e.

div#myElement {
  -webkit-box-shadow: 0 0 3px #999;
  -moz-box-shadow: 0 0 3px #999;
  -o-box-shadow: 0 0 3px #999;
  box-shadow: 0 0 3px #999;
}

So as you can see each of the first 3 properties have a preceding hyphen. This is an idication that they are browser specific. So for instance Webkit browsers will use -webkit while Mozilla browsers will use -moz.

Rounded Corners AKA border-radius

The short hand to apply rounded corners to all four corners of your element is as so.

div#myElement {
	-webkit-border-radius:2em;
	-moz-border-radius:2em;
	-o-border-radius:2em;
	border-radius:2em;
}

This adds rounded corners of 2em to all 4. You can specify a length for each corner like so.

div#myElement {
	-webkit-border-radius:2em 2em 1em 1em;
	-moz-border-radius:2em 2em 1em 1em;
	-o-border-radius:2em 2em 1em 1em;
	border-radius:2em 2em 1em 1em;
}

This applies a 2em rounded corner to the top left and top right while the bottom right and bottom left get a 1em rounded corner.

Drop Shadows AKA box-shadows

Drop shadows are just as easy to apply in CSS3 as rounded corners are.

div#myElement {
  -webkit-box-shadow: 0 0 3px #999;
  -moz-box-shadow: 0 0 3px #999;
  -o-box-shadow: 0 0 3px #999;
  box-shadow: 0 0 3px #999;
}

The first value (0), is the vertical shadow, the second value (0), is the horizontal value while the third value is the blur and the last is the colour of the shadow. These particular values will render a drop shadow on all 4 corners with no lean horizontally or vertically.

A lot of different effects can be achieved with drop shadows so have a play and see what you can come up with.

CSS Transitions

Transitions are a very cool part of the CSS3 specification. A transition can be applied to literally any property and then actioned when hovered. So for example, dimensions, background colurs and font colours can all be tranistioned.

It is important to remember that the tranisition properties are referenced within the elements selectors normal state, i.e.

div#myElement p {
	color:#999;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

And then the actual transitioned values will be referenced as so.

div#myElement p:hover {
	color:#66bb00;
}

(0) Comments

This article has not received any comments yet.

Have your say

Say Hello