CSS3 can be used to help enhance the look of your website for visitors who view it in web browsers that support it.

1. Use Better Fonts with @font-face

Upload the font you want to use to your web folder then add something like this to your css file.

/* CSS */

/*Initialize the font*/
@font-face {
  font-family:cabnd;
  src:url("fonts/CA BND Bold Web/CABNDWebBold.otf") format("truetype);
}

/*Use the font*/
#header h1 {
  font-family:cabnd, helvetica, arial, verdana;
}

2. Make your container div transparent but not it’s children

Notice that each container div can have it’s own transparency set. This can lead to some nice effect where transparency appears stacked.

/* CSS */

#some-container {
  background-color:rgba(255,255,255,0.7);
}

3. Rounded Corners!

Rounded corners can instantly convert a plain looking site and give it a more modern look.

/* CSS */

/* Safari and Chrome */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
                     - or -
-webkit-border-radius: 5px; /* all four corners */

/* Firefox */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
                     - or -
-moz-border-radius: 5px; /* all four corners */

/* CSS3 Compliant Browsers */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
                      - or -
border-radius: 5px;  /* all four corners */

4. Add Content to the page with CSS

/* CSS */

#somediv:after {
  content:"some content";
}

5. Add a drop shadow to your div

Graphic designers know that the easiest way to portray depth is by using a drop shadow. Now this trick is readily available to web designers using CSS3 box-shadow property.

/* CSS */

#shadow-boxing {
  -moz-box-shadow: 0px 0px 5px #000;
  -webkit-box-shadow: 0px 0px 5px #000;
  box-shadow: 0px 0px 5px #000;
}

6. Use text-shadow to create inset effect

The key to creating an inset effect is to match the depth and color of the text-shadow compared to the color of the text being used and the color of the background the text is surrounded by.

/* CSS */

#letter-press h1{
  text-shadow: 0px 1px 1px #eee;
}

7. Use negative text-shadow to create inset effect

In this example, a negative text-shadow is used to create a deeper inset effect.

/* CSS */

#header h1 {
  color: #fff;
  text-shadow: -1px -1px -1px #333;
}

8. CSS Transition

/* CSS */

#menu li a {
background-color:#1f1f1f;

/* Opera */
-o-transition:background-color 300ms linear 200ms;

/* Safari and Chrome */
-webkit-transition:background-color 300ms linear 200ms;

/* Firefox */
-moz-transition:background-color 300ms linear 200ms;

/* CSS3 Compliant Browsers */
transition:background-color 300ms linear 200ms;
}

Do you use CSS3 to progressively enhance your websites? In what ways?