Web designers have an understandable desire to add visual depth and perspective to their projects. We are building in a two-dimensional space, and what would be better and more unique than faking a third dimension? The trend is also prominent in the film industry, as many movies are now being produced in 3D (sometimes, I feel, just for the sake of being 3D). Whether or not the three-dimensional space is effective or not is often dependent upon the context and purpose of the project.
In the web development industry, we have been repeatedly warned to build purposeful designs. Adding design elements for no other reason other than they look cool can often lead to poor usability and, ironically, lackluster interfaces.
That said, some things really do just look cool. If a site is simple enough that a design element won’t take away from its purpose, then we are in a perfect situation to experiment.
I came across Sparkling Milk a couple weeks back, and it has been making an appearance on a number of showcases and galleries for excellent web design. What makes this site stand out most is it’s approach at creating perspective.
Designers have quite the arsenal of strategies for creating the illusion of depth: drop-shadows and shading, sharp converging lines, overlapping layers of content, etc. Sparkling Milk is the first site I have personally seen that really takes advantage of the Gaussian blur effect to create a three-dimensional space. It can easily be compared to the way a camera might work – objects in the frame that deserve the most focus (often those closest to the camera) are sharp, while the rest of the photograph is softer and out of focus.
The translation of the photographic algorithm to the web is very impressive, and the strategy is definitely unique, but at the same time it somehow manages to be slightly disruptive. I can’t imagine staring at it for a long period of time without getting dizzy or straining my eyes.
This strategy is a much more aggressive way to achieve the three-dimensional space, and it will be interesting to see if it catches on. Though CSS3 does not offer an easy, semantic way to create the blur effect, it has definitely been researched and may be something to look forward to in CSS4. (But let’s not get ahead of ourselves.)
The Blur Effect Thus Far…
Creating a Gaussian Blur Effect with CSS3
This strategy manipulates the text-shadow property of CSS3 to blur a block of text, which can be useful when creating custom lightbox modules.
Blurry Background Effect
Chris Coyier at CSS-Tricks shows you how to layer and position background images to blur a specific portion
How to add a Gaussian Blur effect to elements within firefox
This technique uses SVG filters, but unfortunately only works in Firefox as the title applies.
CSS3 Image Blur
This strategy stacks the image several times taking advantage of some shifting, scaling and opacity. Though it’s not the most semantic solution, the outcome is pretty successful. This post also notes SVG filters, though their uses are limited.
What to Think About
Has this strategy been implemented anywhere else on the web or have you learned of any other blurring techniques to create the effect?
What other mediums like photography can we utilize to shape our web design techniques? Please share in the comments below!