Blur Effect

From RuntimeWiki

Jump to: navigation, search

Contents

Title

Blur Effect

Detailed write-up

Description

Add a blur effect to CSS like what exists in Flash or WPF. (Blur effects were not available in early versions of Silverlight, not sure about Silverlight 2.0.)

A simple online demo of the Flash blur effect can be found at http://www.entheosweb.com/Flash/blur_effect.asp.

Why Is This Important?

Sam Lie of Prototype.js says: "Alot of the great visual effects of Flash and Silverlight comes from simple implementation of these APIs. If only CSS had these, we won't need to be relying on hacks of background images and the look and feel of Ajax applications will be on par with Flash/Silverlight."

What exists today?

I looked at the HTML5 spec and did online searches for "blur effect" but came up empty. Has anyone made a concrete proposal for how to enhance HTML or CSS to achieve this? Do any of the browsers provide a blur effect today?

Regarding HTML and CSS animation:

  • IE5.5 added SMIL support within HTML (XHTML+SMIL), which allows animation of most HTML attributes and CSS properties, all of which is very cool, but most likely this is not under active development by Microsoft and doesn't seem to have lit any fires within the Web community
  • Recent builds of WebKit support CSS animations (http://webkit.org/blog/138/css-animation/)

Discussion

In this section, the contributors should express their opinions about this feature request, such as providing particular technical analysis or describing in prose why this feature is important (or not). It is recommended that each contributor create his own level-3 sub-section.

It is OK for others to insert comments within other people's sections, but as a courtesy please make sure that it is clear which part of the section is original and which section are annotative comments. For example, perhaps annotative comments would be colorized (e.g., enclosed by <span style="color:red">JON: Here is what I think about what you are saying.</span>).

Jon Ferraiolo Comments

One approach to keep in mind is to generalize SVG's filter effects (which includes a Gaussian blur effect: http://www.w3.org/TR/SVG11/filters.html#feGaussianBlur) and animation features to work with HTML content, also. I realize this is a rather heavyweight general solution to a lighterweight more specific feature request, but the browser teams should at least think about this approach.

Phase I Voting - Vote for Your Top 5 Features

NOTE: PHASE I VOTING IS NOW OPEN. (2008-04-01) We have now changed the voting procedure. Instead of putting votes on each separate wiki page, we are asking people to cast their Phase I Votes on the following wiki page:


Phase II Voting

More about this later.

Personal tools