27
How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace
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
Author: Cedric Dugas
Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.
14 Comments to “How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace”
Leave a comment
Articles
Some Tweets
- good day today, did an autocomplete widget that use the binary algorithm in pure JS,
- doing a pure js widget.. it's like going back 5 years ago
- Inspire the web with just 10K. A competition from ALA http://10k.aneventapart.com/
- binary search rock large javascript array
- Photoshop just crashed on me, been a while...
- Introduction to the Google WebFont Loader and how to avoid @font-face text flickering with it http://bit.ly/at8Pus
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!
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.
…
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.
[...] 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 [...]
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
The correct response is of course to go with whatever effects look good in newer browsers while degrading acceptably in IE.
[...] How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace [...]
[...] http://www.position-absolute.com/articles/how-to-get-css3-box-shadow-accepted-as-a-viable-option-at-... (css3 ün avantajı) [...]
[...] http://www.position-absolute.com/articles/how-to-get-css3-box-shadow-accepted-as-a-viable-option-at-... (css3 ün avantajı) [...]
[...] How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace [...]