The Year of Frosted Glass

Yesterday’s skinned designs of faux leather stitching and dramatic drop shadows has given way to photo centric flat design.  And one facet of that new style trend is to use transparency.  However as many people come to realize, using a semi transparent color over a photo can often still be too messy visually to allow the content in said container to be easily viewed.

In this example I do not have any text content but you can see how the difference between a transparent window of 70% white (left) and a frost glass effect of 70% (right) make a substantial difference in the ability to see the watermark style icons.

Screen Shot 2014-09-05 at 8.39.32 AM Screen Shot 2014-09-05 at 8.39.56 AM

The effect becomes increasingly beneficial when using a much more detailed background such as in the example below.

Screen Shot 2014-09-05 at 8.49.16 AM Screen Shot 2014-09-05 at 8.49.31 AM

 

The effect is composed of a background image, a semi transparent container, and a layer between the two that is a copy of the background image that is blurred.

blur1exampleStatic Effect

If you are apply the effect to a background image that is static or that doesn’t move you can accomplish this quite easily by just creating a custom version of the background image that has the portion directly where the container will reside blurred.  This is handy when you can get away with it since it avoids additional markup.

HTML

<div class="backgroundImage">
<div class="semiTransparentContainer">My Content</div>
</div>

Dynamic Effect

But what happens when the image is dynamic (generated by a content from a CMS) or is even supposed to move behind the semi transparent container?  This is where it gets more complicated, and fun.

blurexample2If the image source is coming from a CMS but the presentation of the background image to the foreground container is still static then you can generally apply the effect as you would in the static example but in this instance you would call the image into two containers, one that is the clear background and one that is the blurred version that is a “masked” version of the background image blurred using CSS filters.

HTML

<!-- Background Image is in a separate container -->
<div class="backgroundImage">
<div class="semiTransparentContainer">My Content</div>
<div class="backgroundImageCopy"></div>
</div>

CSS

.backgroundImage {
background: url("image.jpg") no-repeat;
background-size: cover;
position: relative;
}

.semiTransparentContainer {
position: absolute;
top: 40%;
left: 40%;
z-index:2;
background: rgba(255,255,255,0.7);
}

.backgroundImageCopy {
position: absolute;
top: 40%;
left: 40%;
z-index:1;
background: url("image.jpg") no-repeat;
background-size: cover;
-webkit-filter: blur(12px);
-moz-filter: blur(12px);
-o-filter: blur(12px);
-ms-filter: blur(12px);
filter: blur(12px);
filter: url("../../resources.svg#svgBlur"); /* Firefox doesn't yet support css filters so SVG must be used */
}

If the object that is blurred is intended to move not in sync with the semi transparent container you will want to apply a scroll event listener using javascript to move the blurred containers image in sync with the background image while the blurred container itself stays in sync with the semi transparent container.

IE Warning

The Dynamic blur effects rely upon the browser to blur the image dynamically.  While not impossible to blur in the browser in IE it does require some extra effort.  In IE9 and below you can use a direct X filter, for IE10 and IE11 you will need to look into using a canvas based blur effect since the Direct X filters are no longer supported.

The Full Site Dynamic Version

But what happens when your blur effect is supposed to be dynamic and could occur over any part of your site?  This is where you need to create what I would call a pseudo shadow DOM.  Thats not an official term but its a label that I think best resembles what you create.

blurexamplegifWith this effect you use Javascript to create a copy of the DOM (after it has been fully loaded in the browser) into a separate container and then apply a css blur filter to that container.  Then use a javascript scroll event listener to dynamically move the duplicate DOM to stay in line with the normal content.  You will also need to make sure your duplicated copy of the dom strips out any ID’s (as those need to remain to unique to your original markup structure) as well as any form elements and any items that would duplicate any html calls.

In order to maintain scrolling performance it was important to move the blurred duplicated DOM using CSS 3D transforms.  Using this method I managed to avoid any significant scrolling performance issues.

Accessibility

This is important! You will also need to set the DOM to not be visible to any screen readers, otherwise you are creating a massive accessibility problem in the process. One option is to add an ARIA attribute of aria-visible=”false” to the duplicated DOM container.

Here is a full video example of the effect.

The end result is a frost glass effect that will work anywhere on your site with any content and at any size.  And thanks to updates in iOS8, the scroll effect even works there live as you scroll at a beautiful 30fps.  On Android browsers I have found the effect to mostly work but the scroll event listener only updates upon scrolling stopping rather than in real-time.

Performance

Using this technique with asynchronous JavaScript and proper caching I have been able to maintain a Google Page speed score of 90.  So overall I have found the effect to be useful without adversely affecting performance.

Conclusion

What do you think of this technique?  Do you have any ideas on how to improve it?  Put your thoughts in the comments below.

Coming Updates – September 8th

I will be providing a downloadable code example later next week for those interested in trying to implement their own version.

  • Daryl Cecile

    Is this project dead?