W3C home > Mailing lists > Public > public-fx@w3.org > January to March 2011

Re: feDropShadow and alternatives

From: Dirk Schulze <vbs85@gmx.de>
Date: Tue, 11 Jan 2011 18:25:22 +0100
Cc: David Singer <singer@apple.com>, Erik Dahlstrom <ed@opera.com>, public-fx@w3.org
Message-Id: <2845EDFA-5DA1-46AC-939F-2AA4E4E07390@gmx.de>
To: Dirk Schulze <vbs85@gmx.de>
>> Are there really use cases, where we filter the result of feDropShadow?I guess it will be unlikely.
> Well, it's simpler to write than the corresponding feGaussianBlur+feOffset+feFlood etc. I think there are cases where that would be handy.

Indeed, but it's just simple if we want to do it with SVGFilter, but do we _need_ to do it with  SVGFilter? Can't there be a solution with CSS? This was what I mentioned. And for SVGFilters, I can't see many useful cases, where we need the result of feDropShadow for a following filter primitive. So the -webkit-svg-shadow implementation is maybe a bit less confusing for web developers, since many developers started with HTML and may know box-shadow or text-shadow.
>> Theoretically multiple shadows are possible (not yet supported by WebKit), something that is impossible to do just with feDropShadow and still difficult with the other effects.
> I think it's possible to do:
> <filter id="dropShadow">
>  <feDropShadow in="SourceGraphic" stdDeviation="5" dx="10" dy="10" shadow-color="black" shadow-opacity="0.5" result="s1"/>
>  <feDropShadow in="SourceGraphic" stdDeviation="2" dx="15" dy="30" shadow-color="blue" shadow-opacity="0.5" result="s2"/>
>  <feDropShadow in="SourceGraphic" stdDeviation="10" dx="5" dy="20" shadow-color="yellow" shadow-opacity="0.5" result="s3"/>
>  <feMerge>
>    <feMergeNode in="s1"/>
>    <feMergeNode in="s2"/>
>    <feMergeNode in="s3"/>
>  </feMerge>
> </filter>
Yes, like I wrote you need more effects than just feDropShadow. And internally you create the blurred background and draw the SourceGraphic (or the input effect specified by in) on top of this. Means you draw the SourceGraphic three times on top of the blurred content instead of just once at the end. And dependent how intelligent your implementation is or not, you have to blur the SourceGraphic three times as well. It is much more easier to detect unnecessary operations with the CSS property. Maybe even GaussianBlur can be faster than the way you mentioned above (with SourceAlpha), since you really just have to blur the alpha channel once and reuse it with three feComposite effects. And:

-webkit-svg-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5), 15px 30px 2px rgba(0, 0, 255, 0.5), 5px 20px 10px rgba(0, 255, 255, 0.5);

seems to be still a bit easier to use, but that's a matter of opinion.

> Have you considered proposing that syntax as an extension of the 'filter' property instead? E.g filter: [<url> | <drop-shadow-shorthand>]
Sorry, don't know what you mean. Do you mean a syntax how you can see it in the CSS spec?

Received on Tuesday, 11 January 2011 17:26:00 UTC

This archive was generated by hypermail 2.3.1 : Monday, 22 June 2015 03:33:45 UTC