RE: [css3] support for filters

Box-shadow dooesn't suffice because it shadows the outside box, not the content within it (unless I'm reading the spec wrong).
Ie if you have a div with several elements, it would add a shadow to the bounds of the div and not the individual elements.

Text-shadow probably was introduced to work around that issue.

Rik

-----Original Message-----
From: Simon Fraser [mailto:smfr@me.com] 
Sent: Wednesday, January 05, 2011 5:44 PM
To: Rik Cabanier
Cc: Cameron McCormack; Charles Pritchard; ed@opera.com; www-style@w3.org
Subject: Re: [css3] support for filters

On Jan 5, 2011, at 4:54 PM, Rik Cabanier wrote:

> It's probably reasonable to only have a couple of shorthand filters for now (blur and dropshadow?) with a simple syntax that can be animated.

Do box-shadow and text-shadow not suffice for shadows? They are already animatable.

I also agree that we need "canned filters" directly in CSS:

div {
  filter: blur(5px);
  transition: filter 1s;
}

div:hover {
 filter: blur(0);
}

It would be useful to get some input from authors on what they see as useful canned filters.

Simon

> It would be a similar approach to css-gradients. They define a simple css syntax for the most common gradients and rely on SVG to render more complicated ones.
> 
> I agree that having multiple instance of <filter> will be suboptimal both in size and performance.
> 
> Rik
> 
> 
> -----Original Message-----
> From: Cameron McCormack [mailto:cam@mcc.id.au] 
> Sent: Wednesday, January 05, 2011 4:32 PM
> To: Rik Cabanier
> Cc: Charles Pritchard; ed@opera.com; www-style@w3.org
> Subject: Re: [css3] support for filters
> 
> Rik Cabanier:
>> Thanks for the info!
>> 
>> Having the filter defined externally to the CSS by using 'url(#..)' will make it harder to use. Is there a proposal to make it part of css?
>> Animated filter are very useful ie it's very common to use a blur filter to simulate motion.
> 
> I think it is worth looking into having shorthand filters specified just in the property itself, like you have with blur(5) below.  If you wanted to support all of what SVG filters currently supports, by writing something in a single property, it’s going to get somewhat complicated, though.  I don’t know how far we want to take it.
> 
> An advantage of allowing filter definitions in the filter property, as you have done, is that CSS Transitions can define what it means to interpolate between two values.  If we only have url() values, then it’s just going to be a discrete change, and you would need to have the transition/animation targetting the <feGaussianBlur> element itself.
> And that would mean that if you want to have multiple elements having an animated blur, you would need separate instances of the whole <filter> so that they could separately animated their blur radius attributes.
> 
> --
> Cameron McCormack ≝ http://mcc.id.au/

Received on Thursday, 6 January 2011 01:52:11 UTC