Re: Non-hacky support for top-and-bottom-only (or left-and-right-only, etc.) drop shadows

On Dec 2, 2012, at 4:31 PM, Behrang Saeedzadeh <behrangsa@gmail.com> wrote:

> Hi,
> 
> Right now box-shadow's syntax does not provide a way for specifying shadows only for top and bottom of an element. The only way of achieving this is using some clever hacks like the one here: http://stackoverflow.com/a/10150898/1736621
> 
> This in turn leads to drop shadows that are brighter than what is expected.
> 
> I think apart from box-shadow, we also need box-shadow-top, box-shadow-right, box-shadow-bottom, and box-shadow-left.
> 
> What do you think?

It is hard to support just top, just left and so on. But at least top + bottom and left + right should be possible. I suggested a horizontal and vertical blur radius for box and drop shadow. This was a request by designers here at Adobe. At the moment you need to use SVG Filters if you want to have different blur radii. But SVG Filters are not supported by most browsers on HTML content yet. Furthermore, SVG Filters can not be animated with CSS Transitions or CSS Animations.

Greetings,
Dirk


> 
> Please see the attached example.
> 
>  Selection_012.png
> 
> 
> Cheers,
> Behrang Saeedzadeh
> http://www.behrang.org

Received on Monday, 3 December 2012 13:39:21 UTC