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

[css4-background][css-text-decor-3][filter-effects] shadow with horizontal and vertical blur radius

From: Dirk Schulze <dschulze@adobe.com>
Date: Mon, 22 Oct 2012 06:06:20 -0700
To: "www-style@w3.org list" <www-style@w3.org>
Message-ID: <8AACD644-316D-45D0-B06F-27E708868582@adobe.com>

I would like to discuss different blur radii for the horizontal and vertical direction. I got a request to add this for the blur() function in Filter Effects[1]. Since Filter Effects, CSS Text Decoration[2] and CSS Background and borders[3] use (fairly) the same syntax, I think it makes sense to discuss this in a global spec scope.

Sadly the shadow syntax does not use comma separation, which makes syntax changes a bit difficult. Maybe we can still come up with a proposal:

	<shadow> = inset? && [ [<length>{2} [<length>[/<length>]?] <length>?] && <color>? ]

This may look complicated but isn't that hard:

	box-shadow: 64px 64px 12px/6px 40px rgba(0,0,0,0.4);

Would create a black shadow with a horizontal blur radius of 12px and a vertical blur radius of 6px. Both blur radii are separated by "/". If the second parameter is missing, the vertical blur is equal to the horizontal blur. Which makes it backwards compatible.

All values need to be animatable separately.


[1] https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterFunction
[2] http://dev.w3.org/csswg/css-text-decor-3/#text-shadow-property
[3] http://dev.w3.org/csswg/css3-background/#box-shadow
Received on Monday, 22 October 2012 13:06:46 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:05 UTC