This is a write-up of my Spoiler Alert pen. I just wanted to share some of the problems I came across and how I solved them. But first, here's the pen.

If you take a peak at the HTML, you'll see that all it needs is a class on the spoiler-filled paragraph.

<p class="spoiler">

No extraneous HTML, no JavaScript. All the magic is self-contained in a single CSS class. This makes it super easy to reuse, but also put a lot of constraints on how I could build it. But hey, that's part of the fun, right?

The Blur Effect

My first crack at blurring the spoiler text was to use filter: blur(). This gave the desired effect, but also blurred the ::before and ::after psuedo-elements in a way that couldn't be undone. I knew I needed crisp text in my pseudo-elements, so I used transparent text with a soft text-shadow instead.

color: transparent; text-shadow: 0 0 20px #55657a;

These two styles were easy to undo on the ::before and ::after psuedo-elements.

color: #872e27; text-shadow: none;

Excellent. Moving on.

The "Spoiler Alert" Text

I used the ::before psuedo-element for the "SPOILER ALERT" text. Nothing tricky there. Just animating position and opacity.

The Countdown

The ::after pseudo-element was another story. This is where I put the countdown numbers. Having no other elements to help out, it had to do a lot on its own.

The content property contains the string '3 2 1'. Notice the spaces. By constraining the width, I forced the content to wrap at each space, effectively giving me consistent vertical spacing (determined by line-height) for each number -- much easier to work with than the inconsistent horizontal spacing of a variable-width font.

With my countdown numbers neatly positioned, I could then easily isolate a single number using clip: rect() -- which is, awesomely enough, animatable. So I setup a CSS animation with clip: rect() to show each number in sequence, using animation-timing-function: steps() on the appropriate keyframes to jump cleanly between numbers.


And that's it. The rest, I think, is fairly vanilla CSS. Sadly, the blurred text doesn't show in IE, though you still get the hover-to-reveal interaction. Overall, a fun little experiment in creating something interesting with just a single CSS class.