As well as the changes to HTML that are taking place in the new specification, there is also a new version of CSS in the works. CSS3 has been tickling at the edge of the general awareness for a while now, but over the past 6-12 months, I’ve noticed it take off much faster.

Just like HTML5, CSS3 doesn’t have to be difficult. Why not start out with something simple? Try experimenting with any of the properties described in this post and see how you get on.  The CSS3 properties that I’ve introduced here can be a nice subtle enhancement to an existing design that won’t ruin the website in older browsers where the new spec isn’t supported.

Text-Shadow

Okay, so strictly speaking it was proposed in CSS2 – except it wasn’t really making the rounds back then. These days it’s one of my favourite personal tools for progressive enhancement.

Text-shadow is supported as is  these days, so you don’t need to add in vendor-specific syntax’s. It breaks down as follows:

.selector { text-shadow: x-value y-value blur-value colour }

For example this text is created with the following:

.demo-textshadow  { text-shadow: -2px 2px 1px #999999}

And it’s as easy as that. The pitfall is that it’s not supported in any version Internet Explorer. I don’t know why. The folks over there are odd.

Border-Radius (aka, Rounded Corners)

Another favourite (okay, so I love them all!) is the border-radius property that’s available in CSS3 – as long as you remember your vendor-specific syntax. That being said, it’s got to be high on the list of the most anticipated properties to come out of CSS3. Who wouldn’t want to say no to getting rid of unduly complicated positioning and annoying images?

It works in a similar to manner to properties such as margin & padding, in that to work out which value controls which corner, you just go clockwise. It breaks down as follows:

.selector { border-radius: topleft topright bottomright bottomleft }

I’ve put together some basic examples showing the basic, different kind of things you can do. As far as I’m aware at the moment (and feel free to correct me) you don’t need the -o- prefix to use border-radius in Opera.

This div has the same radius applied to all corners

CSS for above border-radius example:

.demo-radiusAll { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px  }
This div has 2 different border-radius’

CSS for above border-radius example:

.demo-radiusTwo { -moz-border-radius: 10px 0 10px 0; -webkit-border-radius: 10px 0 10px 0; border-radius: 10px 0 10px 0  }
This div just a bit different

CSS for above border-radius example:

.demo-radiusCool {  -moz-border-radius: 75px 75px 75px 75px; -webkit-border-radius: 75px 75px 75px 75px; border-radius: 75px 75px 75px 75px; height: 90px; padding: 30px; width: 90px;  }

Box-Shadow

Box-Shadow’s are secretly awesome. Seriously! Not only can they handle your typical drop shadow effect, they do inner shadow to. Again this will only work for most people at the moment, if you remember to add your vendor specific syntax.

It works in a similar manner to text-shadow – you have three values in pixels, one for colour and an optional ‘inset’ value that set’s it as ‘inner shadow’ or ‘drop shadow’. A breakdown for reference:

.selector { border-radius: horizontal-width vertical-width blur-radius colour inset/not }

Demonstration of a box-shadow

The CSS for the above box shadow:

.demo-boxshadow { -moz-box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; border-radius: 2px 2px 6px #333 }

Demonstration of a box-shadow with inset

The CSS for the above box shadow:

.demo-boxshadowInset { -moz-box-shadow: 1px 1px 3px #333333 inset; -webkit-box-shadow: 1px 1px 3px #333333 inset; border-radius: 1px 1px 3px #333333 inset }

The other great thing? These properties are also supported in most smartphones such as the iPhone and Blackberry ranges. So you can use all these CSS3 elements to enhance your browser and mobile web designs – as long as you’re not relying on them for the layout to be readable or work there’s no reason not to (in my (humble) opinion).

Thanks for reading our post on mobile web design at The Small Screen today, check back soon!