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
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
Might come handy!
I think you might like this: http://nick-dunn.co.uk/article/cross-browser-drop-shadows-using-pure-css/
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.
I agree with you, pngfix is such a pain
hey thank you very much for this.
nice work. it works for me
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
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’); }
The correct response is of course to go with whatever effects look good in newer browsers while degrading acceptably in IE.