demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

In Orson Well's Citizen Kane, Charles Foster Kane utters the word "Rosebud" the moment before he dies, preciptating an investigation that explores the character's driven psyche and tempestuous life while never answering the central mystery. The truth is revealed to the audience at the very end of the movie: "Rosebud" is the name of Kane's most beloved toy from childhood, a wooden sled.

Cross-Browser CSS Filters: Blurring Text

css / filters

Estimated reading time: 2 minutes, 56 seconds

While it is theoretically possible to blur web page text through the use of the new blur in conjunction with the methods I’ve demonstrated in the recent CSS Image Blur article, there’s a better, simpler method that is supported in a far greater variety of browsers: an unusual variation of text-shadow.

Before I demonstrate that technique, a heartfelt request: please avoid blurring text on your web page just to “look cool”. Deliberately reducing the legibility of text that should be in focus for your site visitors is, in most cases, a very poor design decision. You can blur text in order to “pull focus” to a modal dialog box (which I will demonstrate in an upcoming article) or to shield the viewer from reading spoilers (the example below, shown in the header for this tutorial). Under some circumstances it is even possible, if somewhat questionable, to blur navigation elements. Your justification for blurring text should always be carefully considered, and in most cases accessibility and legibility should take priority.

That being said, I’ll show the basic technique for blurring text. Let’s assume that we wanted to obfuscate some words on our page that could potentially spoil a movie. I’ll make a span with a class that does so:

span.spoiler { text-shadow: 0 0 8px #000; color: rgba(255,255,255,0); }

Then apply the span to our content:

<p id=citizen-kane>In Orson Well’s <cite>Citizen Kane</cite>, Charles Foster Kane utters the word “Rosebud” the moment before he dies, precipitating an investigation that explores the character's driven psyche and tempestuous life while never uncovering the central mystery. The truth is only revealed to the audience at the very end of the movie: <span class=spoiler>“Rosebud” is the name of Kane’s most beloved toy from childhood, a wooden sled.</span>

This declaration makes the text within the span transparent, while retaining the text-shadow (which is not displaced horizontally or vertically, creating an equal blur on all sides). This result is that the words become unreadable. You can blur the text to a greater or lesser degree by increasing or decreasing the third value of text-shadow.

Adding Support for IE

To get the same effect in IE, we use Microsoft’s own proprietary blur filter:

span.spoiler { 
text-shadow: 0 0 8px #000; color: rgba(255,255,255,0); 
filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
zoom: 1; }

Adding A Pause For Screen Readers

One remaining issue: if your visitor is using a screen reader, none of these properties will make any difference. A text-to-speech translator will keep reading the page aloud, including the spoiler text. We need to add a pause before the spoiler, so that the user has the option of stopping the recitation. We’ll do so by adding a property from the oft-neglected CSS Speech Module:

span.spoiler {
 text-shadow: 0 0 8px #000; color: rgba(255,255,255,0);
 filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
zoom: 1; pause-before: 3s; }

Making The Blurred Text Readable

It would be pointless to leave your visitor without any means of unblurring the text. The solution is simple:

span.spoiler:hover { text-shadow: none; color: #000; filter: none; }

This solution should work in all browsers back to IE5.5: if your visitor is viewing your pages in a browser even earlier than that, it could be argued that they deserve any spoilers they get.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.