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.
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
::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
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.
::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.
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.