I've been applying some small CSS3 changes into the style of this website including, text-shadow (post titles), custom font-faces (website title) and finally box shadows. These are viewable in firefox,opera,safari generally non-IE web browsers. Although IE is getting better with the new CSS3 styles, its still not quite there.

So for the meantime i'll be applying some more CSS3 styles to the site including gradients and maybe some border images.

Adding the new CSS3 tags to your current HTML is easy:

Currently mozilla based browsers (firefox's) and webkit based browsers (safari, iPhones, etc) use there own css tags, (-moz and -webkit respectively) but the CSS3 standards version is also shown. (will allow for your code to work when the standards get finalised)

Adding rounded corners to borders:

Border radius sets the curvature of each corner of the box, as if there is an imaginary circle on the corner with a specific radius.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Adding shadows to text
Add a shadow to text by moving the top and left values (these can be negative) then you can change the amount of blur and the colour of the shadow too.

 
text-shadow: top left blur colour;
 

You are also able to add an alpha channel to the shadow to allow transparency by adding an "rgba" colour definition instead of a hex value

 
text-shadow: 1px 1px 3px rgba(0,0,0,.5);
 

Adding Box Shadows
Like the rounded corners mozilla and webkit have there own versions of the css tags:

 
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);
 

The layout follows the same as the text-shadow: left top blur colour; You can still use a rgba value to add an additional transparency layer to the shadow. You can also use more then one definition to each tag.

 
-webkit-box-shadow: 0 0 10px rgb(0,0,0),-10,-10 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0),-10,-10 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0),-10,-10 10px rgb(0,0,0);
 

Custom Font Faces
Having the ability to move away from traditional fonts (arial,verdana,sans,etc) is an excellent additional to CSS3 and when it is fully supported will allow the web to be much more diverse. Although most browsers support @font-face with OTF (open-type) fonts IE uses proprietary TTF (true type) fonts. But you can do 2 definitions so that both types of font type is covered. We are using Jos Buivenga’s Delicious font as an example.

 
@font-face { font-family: Delicious; src: url('fonts/Delicious.otf');}
h3 { font-family: Delicious, sans-serif; }
 

This will allow h3 tags to display the new font-face - If a browser cannot use the CSS3 font-face it will downgrade to the second font in the family.