You have probably seen many websites that look very stylish and modern without using any/very few images or Javascript. How is this possible? Easy! Just use CSS3. This guide will show you what is currently available by using CSS3 and will help you to improve your website designing skills.
Remember: CSS3 is not yet compatible in all browsers so use it to improve the design, rather than relying upon it for important aspects such as usability. Also, all information here is subject to change due to CSS3 still being a Working Draft.

Contents

Rounded Border – Border-Radius

Border Images – Border-Image

Box Shadow – Box-Shadow

Colours – RGBA, HSL

1. Rounded Border – Border-Radius

This is one effect that is very common, though many people use either images or Javascript to achieve it… a better way of doing this (it is not currently in all browsers, but is in most of them) is by using the CSS3 attribute: <inline>border-radius</inline>. Using this property, it is also possible to set certain corners to different radii.

Note: Although the property is called border-radius, even if you have your border set to none, it rounds the background as well.

Sometimes designers like to have borders which look unique, some even have each corner with a different design. With CSS3 you can achieve this effect (as long as you already have the images of course) with just a few lines of code.

Note: The Border-Image property allows you to use one image for the whole border, different images for each edge and images for each corner.

Another effect that designers often use is shadow, you can see it on almost every type of design… so why would web design be any different? Until CSS3 was started, designers had to (like so many other effects) use Javascript and/or images. Images are slow, most website developers recommend using as few images as possible, CSS3 allows us to make shadows in (you guessed it) only a few lines of code!

Note: Some people get confused with box shadows as there are a few different attributes. The horizontal offset is where the shadow will be horizontally, e.g. If it is a positive number then the shadow will be on the right of the box, if it is negative then it will be on the left. The vertical offset is similar, however if it is a positive then the shadow will be above the box, if it is a negative then it will be below. The blur radius is, quite self-explanatory really, how blurry the shadow is; if the blur radius is 0 then it will be sharp, then the higher you go the sharper it will be.

The RGBA is a feature of CSS3 that is becoming more and more popular by the day. It extends the basic RGB colour spectrum with Alpha (aka opacity or transparency). Designers have always liked transparency but before CSS3 it was quite a hard effect to achieve.

This is a colour spectrum that is being introduced into webdesign with CSS3. HSL stands for Hue, Saturation and Lightness. The Hue is the colour and is represented as a number. Unlike Hue, both Saturation (the amount of colour, 0% being gray) and Lightness (how bright the colour is, 0% being black) use percentages instead of numbers.

Note: It is important to remember that, unlike RGB, the base colours of HSL (often shown in a colour wheel) are:

Have you ever needed more than one background-image but have had to make lots of “wrapper” divs to get it to work? Well, no longer! With CSS3 we are now able to just list the backgrounds we want, in the order we want them... how good is that?!

Note: This is an unfinished guide. It has been sitting in my documents for too long so I thought it would be useful to many of the beginners here if I posted it now. I plan to extend it (maybe by editing this one, maybe by turning it into a series) so that it covers all new aspects of CSS3. This would include transformations etc. some of the new features are rather hard so I would like this guide to be useful to everybody!

There will also be links to recommended articles, screenshots and even live demos so be warned... this is just a taster of what is to come!