DonkeyMagic

HTML, CSS and stuff

Richard Stephenson, freelance website design & development

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.

CSS3 enhancement in PC Safari example - nav
CSS3 enhancement in PC Safari example - tab
CSS3 enhancement in PC Safari example - panel

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

CSS3 enhancement in Mac Firefox example - nav
CSS3 enhancement in Mac Firefox example - tab
CSS3 enhancement in Mac Firefox example - panel

Mac Firefox 3.0.11
Does a nice job with the rounded corners but doesn't support box-shadow or text-shadow.

CSS3 enhancement in Mac Safari example - nav
CSS3 enhancement in Mac Safari example - tab
CSS3 enhancement in Mac Safari example - panel

Mac Safari 3.2.3
Best on show for Safari - supports all 3 although I've designed the text-shadow to be very subtle!

CSS3 enhancement in Mac Opera example - nav
CSS3 enhancement in Mac Opera example - tab
CSS3 enhancement in Mac Opera example - panel

Mac Opera 9.64
No support for CSS3 as yet in Opera so basic square design is shown.

CSS3 enhancement in PC Firefox example - nav
CSS3 enhancement in PC Firefox example - tab
CSS3 enhancement in PC Firefox example - panel

PC Firefox 3.0.11
Nice round corners but no shadows.

CSS3 enhancement in PC IE7 example - nav
CSS3 enhancement in PC IE7 example - tab
CSS3 enhancement in PC IE7 example - panel

PC Internet Explorer 7.0.6
Still nothing doing in IE.

CSS3 enhancement in PC Safari example - nav
CSS3 enhancement in PC Safari example - tab
CSS3 enhancement in PC Safari example - panel

PC Safari 3.1.2
Safari once again does a wonderful job with both the corners and the shadows.

CSS3 enhancement in PC Chrome example - nav
CSS3 enhancement in PC Chrome example - tab
CSS3 enhancement in PC Chrome example - panel

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.

CSS3 enhancement in PC Opera example - nav
CSS3 enhancement in PC Opera example - tab
CSS3 enhancement in PC Opera example - panel

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.

Categories: CSS, Design