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

Thanks Rik.  

On Jul 17, 2014, at 10:22 PM, Rik Cabanier <cabanier@gmail.com> wrote:

> 
> 
> 
> On Thu, Jul 17, 2014 at 6:11 PM, Bobby Mozumder <mozumder@futureclaw.com> 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)
> 
> Anyways thanks for your consideration of this.
> 
> Hi Bobby,
> 
> some people on my team recently did a study on this: http://blogs.adobe.com/webplatform/2014/07/10/lean-experiment-overlay-effects/ 
> Please comment on the blog post (or here) if you disagree with their findings.
> 
> The biggest obstacle is that backdrop blurring is an expensive operation that is not available on all platforms. With enough support we can likely lobby for its adoption but it will take time.
> 

Hi Rik.

Thanks for the blog info.  I think the sample size on your study was probably too small.  There’s definitely a demand for this.  A google search of “CSS transparent background blur” returns 328,000 hits for me.  Many of the workarounds involve compositing tricks.

The frosted glass effect is as old as Photoshop itself, way predating Aero glass..  I made websites back in ’97 with this effect, using Photoshop to blur images that were placed in backgrounds.  Books have been written instructing how to do this back in the 90’s.

The reason designers prefer to diffuse blur the background is that it improves legibility for text over other text/graphics, especially at smaller/thinner font sizes.  

A high-contrast background with sharp edges is generally a bad place to put lots of text.  We put text on low-contrast (or solid color) elements without hard edges.  Opacity can solve some of this by reducing contrast, while blurring/diffusion can help by reducing sharp edges.

Without this, you can only really place big, bold, puffy fonts on top of photos, or you have to find a solid spot on a photo to place thin text. 

So, this diffuse blur would help a lot more in a couple of cased: 

1. text-over-text, such as a fixed menubar over a scrolling text backdrop.  
2. Image backgrounds, so that you don’t have to download 2 separate images, using up bandwidth.

I get that it’s an expensive operation.  But we know Firefox can do it, and that iOS7 and Window 7 at least uses it at the OS level.  Also, the blur filter exists already, but it doesn’t operate on backdrops, so I’m not sure where the optimizations are for not allowing blurring of the backdrops.. 

Anyways, hope this is useful info.

-bobby