W3C home > Mailing lists > Public > www-style@w3.org > December 2012

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

From: Dirk Schulze <dschulze@adobe.com>
Date: Mon, 3 Dec 2012 05:38:51 -0800
To: Behrang Saeedzadeh <behrangsa@gmail.com>
CC: W3C CSS Mailing List <www-style@w3.org>
Message-ID: <7E5EB535-E82D-4105-A6EA-BB561A21F1BE@adobe.com>

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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:03 GMT