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.
But let’s look at the typical way of creating a shadow, and what it involves :
8 png, 4 rounded corner, 4 bars
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;
Easier to maintain
Production cost pretty much nonexistent, easier to impliment
Loads a lot faster
Build for the future
Internet explorer users will not see these effects
Not a pixel perfect template