Cascading Style Sheets, commonly known as CSS, has been around for sometime now allowing us to create much more powerful and flexible websites than in the past. Now that CSS has evolved a bit and the acceptance of CSS3 is making its way to our favorite browsers, we can begin to play around with some of the newer features available. Most of the methods are viewable in IE, Mozilla Firefox, and Chrome.

CSS3

Below are some of the features that are available:

  1. The border-radius property – Allows you to create rounded corners for box items. What a time saver this will be! No need for images or fancy techniques to get the rounded corners you want. Supports the capability to specify a radius for one or more corners. Currently supported in Firefox and Safari 3.
  2. Multiple Backgrounds for a single element – Ever wanted to apply more than one background to a single element? Well now you can! For the background property, simply separate backgrounds by commas. At the time of this post, only supported by Konquerer and Webkit.
  3. The box-shadow property – One of the features I’m most looking forward to. Allows you to apply a shadow for box items even with rounded corners. Again no images required! Currently supported in Firefox 3.1 and Sarfari 3+.
  4. The border-image property – Allows you to specify an image for a border instead of a normal border and can be applied for one more sides. Currently supported in Safari and Firefox.
  5. @Font-face – There have always been a group of safe fonts that can be used on the web: Arial, Helvetica Georgia, Verdana, etc. This is because the majority of computers come packaged with these fonts preinstalled. Well, things are a changing. We can now begin to take advantage of various other fonts, whether installed on the readers computer or not, assuming that they can can be pulled via an online directory. Just upload the desired font to your server and pull it via the @font-face feature.