On Sun, Jan 15, 2012 at 8:58 AM, Alan Gresley <a...@css-class.com> wrote: > On 15/01/2012 8:16 AM, Tim Climis wrote: >> >> On Saturday, January 14, 2012 4:06:30 pm Stephen Britton wrote: >>> >>> I am experimenting with CSS3 drop shadows. Most examples only show it >>> working with two sides - usually the bottom and right or left side. >>> Is there a way to have the shadow cover all sides - top, bottom, right >>> and >>> left? >>> >>> Here is some sample code that I have been working with. It only covers >>> the >>> bottom and right side. >>> >>> -moz-box-shadow: 8px 8px 8px #ddd; >>> -webkit-box-shadow: 8px 8px 8px #ddd; >>> box-shadow: 8px 8px 8px #ddd; >> >> >> You just have to make the spread of the shadow bigger than then offset. >> >> box-shadow: 0 0 4px #ddd; >> >> Or, with what you have: >> >> box-shadow: 8px 8px 10px #ddd; >> >> That'll give a 2px top and left shadow, and a 10px bottom and right >> shadow. >> >> ---Tim > > > Not so. There needs to be a forth value in the box-shadow string to indicate > spread. Something like this spreads the shadow evenly on all sides. > > box-shadow:0px 0px 0.5em 0.5em gray; > > The spec goes into some detail in explaining the variations of box-shadow > (see example 29 and 30). > > http://dev.w3.org/csswg/css3-background/#the-box-shadow
Unfortunately the webkit variation doesn't support the 4th number: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-box-shadow The blur radius will make the shadow appear on all four sides, though. .box { -moz-box-shadow: 0 0 10px black; -webkit-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black; } -- Ghodmode http://www.ghodmode.com/blog > -- > Alan Gresley > http://css-3d.org/ > http://css-class.com/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
