RE: [css3] support for filters

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.
The following simulates an object that comes to a stop:

-keyframes a
{
from{
transform: translate(-100px, 50px);
filter: blur(5);
}
to{
transform: translate(200px, 50px);
filter: blur(0);
}}

You'd also specify a timing function to animate the object from fast to slow (as opposed to the default Bezier handling)

Rik

From: Charles Pritchard [mailto:chuck@jumis.com]
Sent: Monday, December 27, 2010 3:49 PM
To: Rik Cabanier
Cc: www-style@w3.org
Subject: Re: [css3] support for filters

On 1/5/2011 3:28 PM, Rik Cabanier wrote:

All,



I'm not sure if this has already been discussed, but are there any plans to introduce the filters to CSS?

It would be great if there was support for blur or drop shadow filters. Having them part of a transition or a keyframes structure would allow for some very useful effects.



The syntax could be based on Internet Explorer's, SVG or Flash.

Since a lot of browsers are moving to GPU acceleration, they should be able to implement this and achieve good performance...
Such discussion will likely happen in the FX group:
http://www.w3.org/Graphics/fx/

.style.filter = 'url(#...)' seems a likely candidate for SVG filters.
(view source here; only works in FF) :
http://paulirish.com/work/videooo.xhtml<view-source:http://paulirish.com/work/videooo.xhtml>

I don't think filter effects have been looked at from the standpoint of animation.
I could be completely wrong on that account.

It'd be nice to see an SVG + WebGL profile develop:
http://webkit.org/blog-files/webgl/Earth.html