Re: [css-images][css-compositing] Blurring an element’s backdrop

On 18/07/2014 11:11 AM, Bobby Mozumder wrote:

> Is there any resolution to this thread about blurring/diffusing the
> element’s backdrop to mimic Aero-glass & iOS 7?  I’m looking at the
> Compositing-1 spec and it looks like there’s no “blur” option in
> <blend-mode>, which is where we would expect it to be.  There’s also
> nothing in the Filters spec on backdrop, only backgrounds.
>
> It appears discussion about this died off last December.  Also the
> Custom Shaders feature were removed from the spec due to security
> issues in January, so that option is gone.
>
> There’s a bigger demand for this blur feature by designers than any
> of the other blend modes, as a lot of designers are trying to
> duplicate that Aero-glass look.  Any site with a white, partially
> transparent Bootstrap header bar likely tried to get it to blur but
> gave up.
>
> Examples of designers facing this problem:
> http://stackoverflow.com/questions/14565520/background-blur-with-css
> (solution only for Mozilla, and needs scrolling scripts)
> http://css-tricks.com/frosting-glass-css-filters/  (this hack only
> for fixed image backgrounds)

Hello Bobby,

Both the Compositing-1 spec with <blend-mode> and the filter spec have 
effects that are acting on *one element*. For <blend-mode>, all the 
colors of one element are blended where with <filter> (where you would 
find “blur”) all the contents of the element has the filter applied.

Now the aero-glass look is what you seen when you look through bluish 
frosted glass [1]. The closes to this is <mix-blend-mode> where there is 
a mix of the colors of *an element* with the backdrop. These colors are 
what are produced by any properties that has color so this includes the 
'background', 'color' (for text), 'border', etc.

If you want the aero-glass look, you only want to blur the backdrop of 
an element and not the element itself. The only way to achieve this 
effect now is using element() for the background-image and this is only 
supported by Gecko with -moz-element() along with a filter. With the 
filter, you need to use 'filter: url(#foo)' for Gecko or 
'-webkit-filter: blur()'. This means that the aero-glass look can only 
be done in Gecko at this moment.

Since the effect can already be done by element() for the 
background-image and filter: blur(), I suspect that implementers will 
just allow authors to use this or a similar approach.

Here is a demo where the blur is achieved,

http://css-class.com/test/css/3/image/blurred-diffused-backdrop3a.htm

and here is a demo where the bluish color is added as an initial 
background layer.

http://css-class.com/test/css/3/image/blurred-diffused-backdrop3b.htm


1. http://antiqueocean.com/glass/lalique/images/LAL07.jpg


Alan

Received on Friday, 18 July 2014 09:17:19 UTC