CSS3 Box Shadows
Shadows have been around since the beginning of CSS2, however the only browser supporting them then (and continually now) was Safari. Shadows can be applied in CSS3 to borders, images as well as affecting text as well.
The CSS3 box-shadow is written box-shadow: Apx Bpx Cpx #XXX;
- Apx = x-axis
- Bpx = y-axis
- Cpx = cast length / feathering
- #XXX = colour as usual
CSS3 Box Shadow
This is a panel set with a 5 by 5 pixel box-shadow, cast by 7px.
- CSS3 Border Shadow
- #my_CSS3_id {
- border: 5px solid #c4c8cc;
- -moz-box-shadow: 5px 5px 7px #888;
- -moz-border-radius-bottomright: 15px;
- -webkit-box-shadow: 5px 5px 7px #888;
- -webkit-border-bottom-right-radius: 15px;
- }
This effect can also be applied to images… 
An example for those on alternative browsers, not seeing the border-shadow effect..
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
- CSS3: Transition
Thank you for reading!
@zenelements // Alex
There is a little bug with Chrome when box-shadow and border-radius is combined, shows in your example but not as disastrous as mine http://nickcowie.com/2008/google-chrome-is-frustrating-me/
@Nick, hello. Thank you for stopping by and giving your feedback. Always appreciate it.
I see how you mean in your example for those CSS buttons, which is a good idea in itself. It is a great nuisance that even the newer browsers are giving poor support to the progression of CSS3 so I agree wholeheartily with when you argue ‘why we should care?’ in your post. If we want to see CSS3 (and the future generation languages), we should care and show the browsers we care. *waves a fist at them all*
Alex | Zen Elements
These style elements also work for Mozilla/Firefox but you have to add the vendor-specific “-moz” prefix. These are working fine for me using Firefox 3.1b2.
Thank you for the update. I will try get my hands on that version asap and amend after clarifying. Can see this will be a tricky series to keep tabs on so hurry up browsers and get compatible! ;)
Nice work on CSS3, more articles please
yes very nice tutorial but the issue is we can not apply them due to browsers compaitibility.
box-shadow doesn’t work for me either with G Chrome… and when combined with radius, there’s a bug in firefox too.
(Sorry I’m late in the bandwagon, Google brought me here) Thanks for the tutorial! Just wanna point out Safari is slowing down when using long shadow (like 100px and more). Maybe the other browsers too. Not that I plan on doing this but it’s great know… at least I think!
Hey there, nice tutorial! i have a question though and I’m not exactly sure if it’s possible or not but is there away to have the box shadow on the left and right of a box rather then the right/bottom? i’ve tried several times to get this to work but no luck… iv been working with CSS for 5 years now and all i can say is WOW THINGS CHANGE!
Hello and thanks for your comment and feedback!
I’m afraid you will be pushed to find a solution to your left/right requirement of the box-shadow property, as control is only given to direct the cast of the shadow as supposed to warp it. One possibility though, while you will get a little cast above/below, is to experiment using two containing layers:
.box1 {-moz-box-shadow:3px 0 3px #333; width:#px; height:#px;}
.box2 {-moz-box-shadow:-3px 0 3px #333; width:#px; height:#px;}
I hope this helps!
Nice Article. Very helpful article.
i enjoyed.
Thnaks
You can combine box shadows within one layer by separating the values with commas. Applying this to the example above, one would use:
box1 {-moz-box-shadow:3px 0 3px #333, 3px 0 3px #333; width:#px; height:#px;}
Just did Joe’s trick on my website and it worked perfectly.
Thanks for the nice Information. I create a new Theme for my Blog and search Online for solutions.
In reference to DJ RyThEm’s question, and Zen Elements response, I have had a limited degree of success creating a shadow to the left and right (and probably to the top and bottom as well, but they’re off the page).
For my page, I wanted shadow on either side to create a “paper” look. This done the trick quite nicely.
-moz-box-shadow: 0px 0px 50px #000
This is great I could apply this right away to my new project
This is a great tutorial. This helps me a lot. Thanks.
Very nice.. Just what i needed..