Spoiler tags: Text blur effect with CSS

If your browser supports it, this text will be blurry when not hovered over so you can't know the secret secret things it is saying! (ETA: I've made changes to my spoiler tags so if your browser doesn't support the blur method, you see a black bar)

I decided that I should probably have spoiler tags of some sort, since I plan to talk about sci-fi occasionally. There are a few popular methods of signifying spoilers:

- Add the words "spoiler alert" above the spoilers
- Make the spoiler text the color of the background and let users manually highlight the text to reveal the spoiler
- Have the text hidden in a div and a link "Click here to reveal spoilers." When the link is clicked, set the visibility of the div to be visible.
- Block out the spoilers with a solid color and display text normally on hover (possibly by setting the background-color of the text equal to the text color, then on hover making the background transparent)

My favorite from the above list is the last option. It takes the least amount of user interaction while making it very clear how you reveal the spoilers - you don't have to say "click here" or "highlight here" to reveal the text underneath. If the spoiler color is black you also get a nice "top secret; redacted" feel from the whole thing. ;)

The problem being: I don't like squares. Big ole' blocks of solid color just don't appeal to me. I wanted something smoother, something that would make the text unreadable but that would blend nicely with the surrounding layout and not be jarring. Eventually it hit me: blur. If I could find a way to blur the text to make it unreadable and then reveal the text on hover...

After a fairly lengthy search on Google I found this really, really clever way of blurring text with fantastically simple CSS. You use the text-shadow property to create a blurred shadow of the text, and then make the text itself transparent, leaving only the shadow visible.

I set my blur radius high enough that for my font size it blurs enough that the words become illegible. I swapped the hover-code so the text become clear on hover and blurred when not. Here's the CSS of my spoiler tags:

/* Spoiler tags*/
.spoiler {
display: inline-block;
text-decoration: none;
color: transparent;
text-shadow: 0px 0px 5px #000000;
}
.spoiler:hover{
text-shadow: 0px 0px 0px #000000;
}

I use like this:
Look out! <span class="spoiler"> Surprise! </span>

Look out! Surprise!

Now I have to make a choice: keep the blur spoilers for myself (who uses the latest version of browsers and only uses chrome and firefox) and add in exceptions for people using browsers/versions that don't support (by, say, overriding the CSS for the spoiler class to be black-block style spoiler tags) or throw away the blur spoilers altogether. Hmmmm.... (ETA: done; Updated version here)

Browser Compatibility

I tested it on 5 current browsers (Versions listed are the major component of the version number only), and am listing which browsers support transparency for text (according to here) and which support the text-shadow property (according to here)


Firefox

Version tested: 3.6
Color:transparent 
support: Greater than 3.0
text-shadow 
support: Greater than 3.1

Internet Explorer

Version tested: 7.0
Color:transparent 
support: none
text-shadow 
support: none
Transparency is only avaliable for background and borders; anything else is made black.
Also note that IE doesn't support
hover 
on non-link elements


Safari

Version tested: 5.0
Color:transparent 
support: Greater than 3.1
text-shadow 
support: Greater than 3.1

Chrome

Version tested: 5.0
Color:transparent 
support: Yes; unknown version
text-shadow 
support: Greater than 2

Opera

Version tested: 10.60
Color:transparent 
support: Greater than 10.0
text-shadow 
support: Greater than 9.5 (possibly lower)
Opera seems to make the the text shadow invisible if the text is invisible.


Layout Engine Compatibility

Arguably more relevant than browser versions is the engine they use - the same engine can be used for more obscure browsers so they behave the same as a more mainstream one.

Gecko current: 1.9.2.6
All mozilla browsers
Color:transparent 
support: 1.9
text-shadow 
support: 1.9.1

Presto current: 2.6.30
Opera, Nintendo browsers
Color:transparent 
support: 2.2
text-shadow 
support: 2.1

Trident
Internet Explorer
Color:transparent 
support: none; renders as black
text-shadow 
support: none

WebKit current: 533
Safari, Chrome, Android, Steam, some others (mostly mobile)
Color:transparent 
support: 525
text-shadow 
support: All

So the blur effect will work for gecko engines version 1.9.1 and greater and for the webkit engine version 525 and greater. Everything else will not display properly and would be a candidate for black-block style spoilers.

2 things about

Spoiler tags: Text blur effect with CSS
  1. aaaaaaaaaaah no comments, don't you hate that? Especially when you put so much info in a post.
    Anyway, here are your kudos =D
    Great job!

    ReplyDelete
  2. Stumbled on this one. Good job. It takes real patience to get the cross browser compatibility, and generosity to share it with the community.

    Very cool beans indeed!

    ReplyDelete

Copyright 2012 Phile not Found. See About
Powered by Blogger

"Whenever you find that you are on the side of the majority, it is time to pause and reflect."