I'm Gilbert Pellegrom.

Following the principles of progressive enhancement I am going to show you some CSS3 techniques which I have been using in my sites recently and which I would encourage you to start using as well.

“But not all browsers support CSS3 techniques yet!” I hear you say. Yes this is true. However, these are techniques which you should use only to enhance the experience for a user. They should not be fundamental for your web site/app to function. After all if we designers and developers don’t start to use them how will they ever get adopted in the mainstream.

Rounded Corners

Here is probably the most used technique of CSS3 so far and for good reason. It makes rounder corners of elements so much simpler than it used to be.

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

Text Shadow

This is probably going to become one of the most over used CSS3 techniques but it is quite cool.

text-shadow: 2px 2px 2px #000;

Opacity

This is another really useful technique which isn’t too hard to replicate with png’s. This is simpler however.

opacity: .7;

Box Shadow

Another cool one that makes adding shadows to objects super simple.

-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;

Font Face

There are many javascript/flash way’s to achive this technique. However this is a simple unobtrusive way to add cool font’s to your sites.

@font-face {
    font-family: 'Rough';
    src: url('fonts/roughdraft.ttf');
}
p.font {
    font-family: Rough;
    font-size: 30px;
    line-height:30px;
}

Conclusion

All of the above techniques (excluding font-face) are used in this blog design. See how a few small tweaks can really add that extra pop to a design. Even if only a certain percentage of users can see them. Remember I encourage you to start using these techniques when you can but only to enhance the users experience. If your not sure when you can use them check out the core principles of progressive enhancement.