Re: [css-d] four-sided CSS3 drop shadow?
On 16/01/2012 4:15 PM, Ghodmode wrote: On Sun, Jan 15, 2012 at 8:58 AM, Alan Gresley wrote: 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; } To my memory, all versions of Safari 5 has supported the forth value of spread. I have found the patch for it here [1] which was landed in late 2010 (over a year ago). A test case.p, div { width: 10em; margin: 3em; font-size: 200%; box-shadow: 0 0 0 1em black; }div { box-shadow: 0 0 1em 1em black; } Some text shadow Some text shadow 1. https://bugs.webkit.org/show_bug.cgi?id=51448 -- 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/
Re: [css-d] four-sided CSS3 drop shadow?
On Jan 16, 2012, at 2:15 PM, Ghodmode wrote: > Unfortunately the webkit variation doesn't support the 4th number: yes it does since Safari 5.1 (and Chrome 12, I think) > http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-box-shadow As I have pointed out before, that document is outdated and inaccurate. Safari 5.1 / Chrome 12 (?) supports the box-shadow property without vendor-prefix, btw Philippe -- Philippe Wittenbergh http://l-c-n.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/
Re: [css-d] four-sided CSS3 drop shadow?
On Sun, Jan 15, 2012 at 8:58 AM, Alan Gresley 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/
Re: [css-d] four-sided CSS3 drop shadow?
On Sunday, January 15, 2012 11:58:48 am Alan Gresley wrote: > > You just have to make the spread of the shadow bigger than then offset. > > > > box-shadow: 0 0 4px #ddd; > > > Not so. There needs to be a forth value in the box-shadow string to > indicate spread. My bad. There are so many parameters to this one, it's hard to keep them straight, and they kind of hide them in the spec. But you are absolutely right. Spread is the fourth parameter; blur radius is the third. I had them backwards in my head. It might be worth noting that the size of the shadow is a combination of the spread and the blur. There's a pretty good diagram of this at css3.info, about a third of the way down the page: http://www.css3.info/preview/box-shadow/ ---Tim __ 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/
Re: [css-d] four-sided CSS3 drop shadow?
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/
Re: [css-d] four-sided CSS3 drop shadow?
On 1/14/12 1:16 PM, 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 To add to Tim's suggestion, be aware that you can specify a fourth length value - "spread." That lets you increase (+) or decrease(-) the size of the shadow that's "behind" the box. You can also create more than one shadow, of course (and use negative "X" or "Y" values to put the shadow to the left or above the box.) -- Cordially, David __ 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/
Re: [css-d] four-sided CSS3 drop shadow?
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 __ 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/
[css-d] four-sided CSS3 drop shadow?
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; -- Stephen Britton Technology Consultant sbrit...@gmail.com Twitter: @StephenBritton ph: 914-661-0040 "Life isn't about finding yourself. Life is about creating yourself." - George Bernard Shaw __ 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/
