As you’ve noticed, a few weeks ago I launched a redesign of my website and blog. Although I’ve used some elements of CSS3 in the past, this design uses the most. Not all browsers display all CSS3 styles, but most modern browsers implement at least some.
The CSS3 styles that I used on this site are rounded corners and drop shadows, but other elements include alpha transparency control, web fonts, text shadows, and attribute selectors.
Rounded corners
The classic way of creating rounded corners involves creating background images, which is difficult and messy to do. Although it only works in Firefox and Safari/Chrome, the CSS3 method is much simpler and requires two lines of CSS on the element:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
The top line is read by Firefox, and the second line by Webkit browsers (Safari and Chrome)
Drop shadows
Although it only currently works in Safari, drop shadows now (or will soon) no longer require the use of graphics:
-webkit-box-shadow: 1px 1px 5px #ccc;
The first two values contain the horizontal and vertical (respectively) distance between element and shadow, the third value (5px) the size of the drop shadow, and the last element defines the colour.
Alpha transparency
CSS3 lets you define exactly how opaque a colour is by using the RGBA format (red-green-blue-alpha). This can be used in place of a hex code anywhere you define colour in your CSS. For example, if you want a semi-transparent black background for a div you might use
background-color: rgba(0, 0, 0, 0.8);
Where the red, green and blue values are 0 and alpha is at 80%.
Web fonts
With CSS2, the only choice you had regarding fonts were using a web-safe font such as Arial or Gill Sans, or using an image replacement tool such as sIFR or FLIR. CSS3 includes web fonts, which allows the browser to import a font file stored on the web server. This is achieved using the @font-face rule.
Text shadows
Text shadows allow you to give normal text a small drop shadow, which is especially useful if you have a background image that may make the text harder to read. This can be achieved very easily, with a format similar to drop shadows:
text-shadow: 1px 1px 2px #ccc
Attribute selectors
CSS3 allows you to style a tag depending on any attributes. So for example you can include an icon after an external link, or apply a style to a password input box.
a[href^='http://']:after{
content: url(images/externallink.png);
}
href^=’http://’ means to match <a> tags with the attribute ‘href’ beginning with ‘http://’
^ can be replaced with $ to match those ending with a string, or replaced with * to match those attributes which contain a string.
Conclusion
So even though not all browsers support all parts of CSS3 yet, I believe it’s worth using those that are supported now, as part of progressive enhancement.