How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace

by Cedric Dugas on July 27, 2009

This is a small pledge for implementing CSS3 on non-critical design elements, I thought it might help other front-end developer to convince their boss, fell free to use it! What you need to understand, from my point of view, is that CSS3 can help save considerable time to your web development team, this article talks about these new tags and how it can save times and frustration.

CSS3 in modal boxes

Box-shadow and Border-radius are new CSS3 tags implemented in every major web browsers beside Internet explorer, it enables developers to create simple shadows and rounded corner around div elements.This type of shadow is often found around lightbox or modal boxes.
Considering modal boxes and such graphic elements are not generally presented to the client, I suggest using this technique over the old images technique because of all the benefits this will have.

Using box-shadow is as easy as creating a CSS border, it takes an average of 30 seconds. This makes it easy to change the intensity, color and background color of the box. With a conventional technique you would have to recreate all the images (and find the PSD file).

This eases the website management over time, and this is only 6 lines of CSS. If you compare it to the old techniques, changing the modal box involve a long process, and the developers might also forget about details, like the png fixe. There is a risk of breaking the website.

Another advantage, it will loads considerably faster, there is no images or javaScript involved, and the shadow will appear instantly with the wrapped div.

But let’s look at the typical way of creating a shadow, and what it involves :

8 png, 4 rounded corner, 4 bars
Javascript image preloader if you want your modal window to load gently.
A clustering of divs or table around the modal window and a good chunk of CSS
PNGfix for IE6
Debugging in every browser, costly developement.

And the other way

box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
-moz-box-shadow: 0px 0px 6px #000000;
 
border-radius: 5px;
-webkit-border-radius:  5px;
-moz-border-radius:  5px;

In brief:

Advantages:
Easier to maintain
Production cost pretty much nonexistent, easier to impliment
Loads a lot faster
Build for the future

Disadvantages:
Internet explorer users will not see these effects
Not a pixel perfect template



15 comments

Thanks for posting your pro/con argument.

Under advantages, you might want to correct this line as follows:

Production cost pretty much nonexistent, easier to implement

by vbdietz on July 28, 2009 at 10:23 am. Reply #

Might come handy!

by Mike on July 28, 2009 at 11:19 am. Reply #

How to: Get CSS3 box-shadow accepted as a viable option at your workplace…

A summary on pros and cons of the CSS3 box-shadow technique.

by CSS Brigit | How to: Get CSS3 box-shadow accepted as a viable option at your workplace on July 28, 2009 at 4:50 pm. Reply #

I think you might like this: http://nick-dunn.co.uk/article/cross-browser-drop-shadows-using-pure-css/

by Marcus on July 29, 2009 at 11:25 am. Reply #

I am always a bit concern when using IE hack like
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)

And the result is really inferior to box-shadow

However, it may help if you can produce a good shadow.

by Cedric Dugas on July 29, 2009 at 12:04 pm. Reply #

[...] CSS3 ist in aller Munde, einige Artikel über die Box-Shadow Attribute, und die Möglichkeiten der Umsetzung in älteren Browsergenerationen: How to: Get CSS3 box-shadow accepted as a viable option at your workplace [...]

by Links der Woche 34/09 – diesmal etwas mehr… | Webdesign & Online Shops | Kai Köpke Blog & Portfolio on August 20, 2009 at 5:16 am. Reply #

I agree with you, pngfix is such a pain

by Elios on August 26, 2009 at 12:26 pm. Reply #

hey thank you very much for this.

nice work. it works for me

by Kashyap Patel on September 1, 2009 at 1:48 am. Reply #

If you want rounded corners only, I would rather use jQuery to achieve the effect. There is a plugin that is really easy to use called “Corner” you can get it here:

http://www.malsup.com/jquery/corner/

It even works for IE 6+ which is why I would use it. There are only about 10% of the internet users that has javascript turned off (the ones that it will not work for) contra the much bigger portion of users that use IE. Hence It will work for at broader audience.

Then agai, I would not have to write this if the crapbrowser IE would not exist (thank you Microsoft for holding the web back).

You should visit my website at: http://designbank.se

by Robin Cox on February 11, 2010 at 8:14 am. Reply #

I use that plugin as well, but it can’t cope with box-shadow, and sometimes incorrectly guesses the corner color, particularly over gradients

My code ends up looking like
if($.support.borderRadius)
{ $(‘.selector’).corner(); }
else
{ $(‘.selector’).corner(‘top cc:#553300′).corner(‘bottom cc:#004488′); }

by Michael on March 24, 2011 at 4:10 pm. Reply #

The correct response is of course to go with whatever effects look good in newer browsers while degrading acceptably in IE.

by Erik Veland on March 29, 2010 at 11:39 pm. Reply #

[...] How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace [...]

by zomigi.com » Web Directions USA slides and resources on September 23, 2010 at 8:47 am. Reply #

[...] How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace [...]

by zomigi.com » Adobe MAX slides and resources on October 26, 2010 at 5:41 pm. Reply #

[...] CSS3 ist in aller Munde, einige Artikel über die Box-Shadow Attribute, und die Möglichkeiten der Umsetzung in älteren Browsergenerationen: How to: Get CSS3 box-shadow accepted as a viable option at your workplace [...]

by Links der Woche 34/09 – diesmal etwas mehr… | Kai Köpke on January 2, 2011 at 2:38 pm. Reply #

[...] How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace [...]

by zomigi.com » CSS3 book launch event on January 25, 2011 at 9:39 am. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.