Go ahead, add some flair to your site with CSS3!

The day has come to stop focusing on Internet Explorer's limitations and start focusing on the other browsers that allow CSS3. It takes very little extra time, and you can add some sizzle with just a few extras in your CSS.

Justifications for CSS3

There are two main reasons I recommend you include CSS3 extras in your site development.  

1. Polish is one piece in the puzzle that has been proven to enhance the perception of value and professionalism of your site. (Full study is available here.)
2. Surprise can drive engagement with your site. (See In Defense of Eye Candy.)
3. A bonus reason: it's quick! Why not?

CSS3 attributes to definitely use

There are a few that we can start incorporating immediately, including @font-face, border radius, box shadow and gradients. These can be used to reduce dependence on images in your design and reduce page load time. They also degrade gracefully (IE 7 for example, will see a square border and a solid color instead of a gradient.)

CSS3 attributes to try out

Two that I highly recommend you begin incorporating into your site development today are transitions and transforms.

Transitions

With CSS3 transitions, you can add a transition effect when you change the style of an element. The best example of this is when you hover over a link or button. Why not set a one-second ease in of the color transition, just to give some polish to your buttons? It is quite simple to add this, chances are you already have a:hover. Just add the new declarations to the bottom of that style declaration.

Transforms

Add a transform to your buttons or icons on hover. I love how the Facebook developer page does it (hover over the three middle, round icons.) This is also very simple to add to the a:hover declaration in your stylesheet. 

My secret weapon  

Use this wonderful CSS3 Generator to create the code and paste into your stylesheet. You can quickly build your effect and see which browsers will support your code.

Related Articles

• Leave Arial and Times in the past — @font-your-face to the rescue
• HTML5 Base Starter Themes in Drupal 7
• Proper use of HTML5 elements - Semantic Structure