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
--
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/
