CSS3 Demos and Experiments

CSS3 is making life easier and quicker for web designers and coders. Many tasks that used to require images or javascript can now be achieved with CSS. Here I've explained some of the most useful elements and included a selection of demos to show the usefulness and power of CSS3. I'll be adding more demos so keep checking back.

Basics CSS3 Elements

:before and :after
How these two pseudo elements can be useful in styling, with a few demos

border-radius
Add curved corners to elements, or even create a circle from a list item - with no need for images.

box-shadow
Quickly add drop-shadows to elements, without having to use images

Gradients
Add gradients to backgrounds with no need to create any images

nth-child
An easy way to style individual elements in a different way to the rest of their group

transform:rotate
Use CSS3 transform to rotate an element, with some demos of rotate being used