W3C home > Mailing lists > Public > www-style@w3.org > September 2011

Re: suggestion of adding top,right,bottom,right to box-shadow

From: Brad Kemper <brad.kemper@gmail.com>
Date: Wed, 14 Sep 2011 06:18:23 -0700
Message-Id: <F63BEEE8-A3D3-443D-B2A8-8C5E50CEB4CE@gmail.com>
Cc: Simon Fraser <smfr@me.com>, "www-style@w3.org" <www-style@w3.org>
To: shi chuan <shichuanr@gmail.com>

The way you describe hiding parts of the shadow by specifying them per-edge sounds awkward and unnatural. The UA would have to be able to have separate offsets and blurs and spreads and colors for each side, somehow joined at the corners. But based on your use case, really all you need is a way to crop the shadow. Using overflow:hidden is not that hacky a way to do it, and much more natural than your idea. 

On Sep 13, 2011, at 11:04 PM, shi chuan <shichuanr@gmail.com> wrote:

> Hacks can be used to make it achieve similar effect. But I am just thinking it's good to have native support.
> 
> On Wed, Sep 14, 2011 at 1:35 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> I think what you are really looking for is a way to crop the shadow even with an edge of the element. You should be able to do this with overflow: hidden. So, supposing each LI had a box shadow, you could set overflow: hidden on the UL, and then give the UL enough padding on the other three sides so that the shadow is not clipped there.
> 
> On Sep 13, 2011, at 9:44 PM, shi chuan <shichuanr@gmail.com> wrote:
> 
>> I have been thinking about it. The ideal way to render is, by default, there is some mechanism to detect if it is a joint point by two sides both with shadow applied, if it is, then the shadow fills the joint corner, for instance:
>> 
>> If we define top and left shadow, the top-left corner is filled; but top-right and bottom-left are not. 
>> 
>> 
>> On Wed, Sep 14, 2011 at 12:35 PM, Simon Fraser <smfr@me.com> wrote:
>> On Sep 13, 2011, at 6:28 PM, shi chuan wrote:
>> 
>>> box-shadow is lack of the option to be displayed only on specific sides of the box.
>>> 
>>> We can't defined it as box-*-*-shadow. it's often used together with other CSS properties like border-radius which supports this syntax. It will be great if we could use the following way to specify the sides we want the shadow to be displayed (top,right,bottom,right)
>>> 
>>> box-top-left-shadow 
>>> 
>>> Currently this can't be achieved without some kind of hack. (reference: http://stackoverflow.com/questions/4909561/css3-box-shadow-on-top-left-and-right-only)
>> 
>> What do you expect to happen at the corners if shadow is only visible on some sides of the box?
>> 
>> Simon
>> 
>> 
>> 
>> 
>> 
>> -- 
>> Shi Chuan Web Developer
>> Twitter: @shichuan | Skype: shichuanr
>> shichuanr@gmail.com | www.blog.highub.com
>> 
> 
> 
> 
> -- 
> Shi Chuan Web Developer
> Twitter: @shichuan | Skype: shichuanr
> shichuanr@gmail.com | www.blog.highub.com
> 
Received on Wednesday, 14 September 2011 13:19:06 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:44 GMT