9

I want to create an opacity blur overlay, similar to Windows Aero or iOS7. Unfortunately the filter: blur() or filter: url(#svgBlur) properties can only apply to the element, not content behind it.

To get round this we need a copy of the background that is blurred. This is possible in FX using the background: -moz-element(#elementId) experimental CSS property. Using that I can get the effect I want in FX only.

There are other questions about solving the blur problem, and one solution appears to be the use of the html2Canvas plug in.

However that is recreating the entire blurred content, including manually recreated styles and the like. It's very impressive work, but it seems like massive overkill (both in performance and size) for this kind of effect.

What I want to do is create is some kind of shim just for -moz-element. It looks like that should be possible using an SVG foreignObject, but that has both security issues and fails if your HTML is not valid XML.

Is there any way round of emulating -moz-element (using canvas, SVG, or something else) where I don't have to parse/redraw the entire overlaid area?

Community
  • 1
  • 1
Keith
  • 150,284
  • 78
  • 298
  • 434
  • Couldn't you use a semi-transparent background image as a fallback and call it a day? – cimmanon Sep 20 '13 at 14:40
  • @cimmanon actually a CSS `opacity` flag would be the fall back for non-compliant browsers, but that's all it would be: a fall back. – Keith Sep 23 '13 at 07:56
  • more than 2 years since the question was asked and still firefox is the only browser, which supports this awesome feature. That's a shame. – MaBi Aug 17 '15 at 19:20

3 Answers3

2

Browsers that support the BackgroundImage pseudo input allow you to filter the content behind an element. Opera 12 supports that and maybe some other UAs too.

I think Opera 12 also supports the SVG 1.2 Tiny feature of having an external foreignObject i.e.

<foreignObject xlink:href="external file url"/>

You could combine this with the backgroundImage to have html content as a background even if the html content was not not valid XML.

Your milage may vary with other UAs though and as you say Firefox has a different solution.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • That lets me use SVG content as background for other SVG content - it might lead to a solution to this problem, but I can't see how. – Keith Sep 23 '13 at 08:01
0

You can check out a plugin I recently made called AeroJS. It does exactly what you're looking for and supports everything but IE.

EDIT: My apologies for not not including a description of the plugin.

Basically, the way AeroJS works is by taking the HTML of a specified element (backgroundElement), the background image of a specified element (backgroundImage) and prepending them to the specified element. Then, using WebKit's blur filter, a specified amount of blur (blurAmount) is applied to the elements in the background. It's still in the early stages of development so bugs are expected. One drawback of using AeroJS is that it's almost entirely static. You can move around the element and everythung behind it will be blurred however any changes that happen to the original DOM will not be reflected in the blurred/copied HTML. Custom code will be needed for that.

Kasim Ahmic
  • 312
  • 3
  • 15
  • That does blur the content, to an extent, though it would still need to create a complete copy in order to apply as a blur behind something. No vote up because it's all in the external link (for an upvote the content has to be here in SO, with an explanation of how it works). Looking at your code it looks like it just wraps the content in a `
    ` with the blur style applied. You also have a severe bug with elements that don't have a class applied or that have a class that is not unique.
     – Keith Jul 13 '15 at 07:24
-5

If those properties only apply to the selected element, why don't you select them all?

Maybe with:

#myElementID *
Ivozor
  • 976
  • 8
  • 23
  • 1
    I don't get how this helps. `-moz-element` lets me set the background of an element to be another element. That's what I want to do: use a screenshot of one part of the page as the background for another part of the page. – Keith Sep 23 '13 at 07:58