Saturday, February 13, 2010
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).
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;
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.