CSS3 techniques you can use today

The future of CSS is exciting with all the new techniques coming our way in CSS3. Though CSS3 is not yet fully supported in all popular browsers there are some browser specific prefixes that are supported in such leading browsers as Firefox, Chrome, and Safari. Because CSS3 is not fully supported yet we have to use the following extensions:

  • -moz- for Mozilla/Firefox
  • -webkit- for browsers running on Webkit (Safari/Chrome)

So let's look at a few CSS3 techniques that I use on this site that can be used in today's leading browsers that degrade well in the non-supported browsers (Internet Explorer).

Rounded Corners

Having rounded corners in your designs has always been possible using graphics. An easier way is to let CSS do it for you. If you look at my site you will see a few rounded corners here and there such as on the background of the sidebar to the right. I'm using both the Mozilla and Webkit specific styles to make that happen. First you write the specific prefixes for both mozilla and webkit browsers then you add the radius value for the corners. If all corners have the same radius then you can simply write:

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

To add a different radius value to each corner you will first need to add the specific prefix for each corner and then add the radius value.

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;

-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 20px;

Text Shadows

The drop shadow effect is one of the CSS3 properties that is actually supported in all the leading browsers except, you guessed it, Internet Explorer. The first 2 values are the X and Y coordinates. The next value is the blur radius of the text-shadow. And the last value is the color of the text-shadow. This effect can be seen at the top of my site on the large blue text.

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

In a future post I will show more CSS3 techniques that can be used in today's leading browsers.

Posted on 02/13 at 02:56 PM

Comments

There are no comments for this post. Be the first to comment.

Leave a Comment

Commenting is not available in this weblog entry.

Next entry: This week's tutorials from around the web

Previous entry: New version of Chrome beta for Mac now supports extensions

« Back to journal