Comments on: CSS3 Box Shadows

By: Joe

Joe — Thu, 03 Jun 2010 13:26:13 +0000

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;}

By: borntowinanwar

borntowinanwar — Mon, 17 May 2010 07:28:00 +0000

Nice Article. Very helpful article.
i enjoyed.
Thnaks

By: Zen Elements

Zen Elements — Fri, 09 Apr 2010 15:02:00 +0000

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!

By: DJ RyThEm

DJ RyThEm — Fri, 09 Apr 2010 11:52:34 +0000

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!

By: Bertrand

Bertrand — Thu, 01 Apr 2010 15:44:52 +0000

(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!