Enhancing your designs with CSS3
When I designed the current version of this site I always had it in my mind that one day in the dim and distant future I would enhance the design with some CSS3. I wasn’t thinking about anything too radical - rounded corners, and some shadows on my fonts and boxes would do. Well after reading an excellent article on Smashing Magazine by Inayaili de Leon appropriately enough titled Take Your Design To The Next Level With CSS3 I decided to do just that. Bear in mind that many browsers, especially ones beginning with IE, still do not support these enhancements.
Adding rounded boxes
Adding rounded corners to elements is done using the border-radius attribute. Mozilla and Webkit browsers have their own versions so they are handled by the browser specific -moz- and -webkit- identifiers.
.panel {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Border radius can also be applied each corner of a box separately.
.back_to_top {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
Watch out for the differing syntax between the attributes for Mozilla and Webkit.
Adding box shadow
After such easy rounded corners box-shadow should be one of the biggest time savers in the CSS3 designers toolbox as it gives us the ability to add instant drop shadows and glows to elements. An interesting extra bonus is the CSS3 RGBA colour notation alows us to specify the opacity of shadows and glows.
To add a nice big 20% opacity black drop shodow we can do something this:
.box {
-webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
}
Adding font shadow
The font-shadow attribute allows us to add shadows and glows to text elements. It’s not very well supported but should eventually provide a really useful addition to the CSS designers arsenal. It works nicely in Safari on both Mac and PC.
p {
text-shadow: 0 0 2px rgba(0,0,0,0.2);
}
Examples & screenshots
Mac Firefox 3.0.11
Does a nice job with the rounded corners but doesn't support box-shadow or text-shadow.
Mac Safari 3.2.3
Best on show for Safari - supports all 3 although I've designed the text-shadow to be very subtle!
Mac Opera 9.64
No support for CSS3 as yet in Opera so basic square design is shown.
PC Firefox 3.0.11
Nice round corners but no shadows.
PC Internet Explorer 7.0.6
Still nothing doing in IE.
PC Safari 3.1.2
Safari once again does a wonderful job with both the corners and the shadows.
PC Chrome 2.0.172
Google’s chrome browser does support the applied CSS3 attributes but as you can see it doesn’t do a very good job. The rounded corners and not antialiased so look jagged and the fonts with shadows applied look ugly.
PC Opera 9.64
No support in Opera.
More information
As browser support for CSS3 is not universal, using the attributes really needs to be treated as enhancements to your existing design and coding practices. Designing a website that looks fantastic in Safari when 40% of your client’s target audience uses IE6 is asking for trouble. That doesn’t mean we should wait to use CSS3. Just make sure you show the client the design in different browsers and explain about the concept of progressive enhancement! Check out the W3C Introduction to CSS3 and the excellent CSS3.info for more information and examples.
Published:
Your comments…