Blue text. Underline. We’re going to do so much more than this. And build out a highlight effect that covers the text on hover. AND the inverse: a spoiler tag that reveals the hidden text when we click or tab over it.
And before you ask, yes. Vader is Luke’s dad, Bruce Willis was dead the whole time, Gossip Girl was Dan, and Apple’s releasing a brand new iPhone next year.
[Grimur] Okay.
[Sara] They do it every year.
[Grimur] ...who’s Gossip Girl?
Sara: We will break this into five parts: creating the text link, styling it, creating the effect, adding our transition, then demonstrating a modified version for a spoiler tag that reveals when the text link is ACTIVE.
[Grimur] Baby Yoda’s name is Grogu.
[Sara] What are you doing?
Grimiur: Thanos wipes out half the universe.
[Sara] I get it, more spoilers.
[Grimur] If you turn up the volume?
[Sara] Mmmhmm?
[Grimur] The top at the end of Inception topples over.
[Sara] No, that’s... not true.
[Grimur] You’re right.
[Sara] In this paragraph, we’ll go in, and set this text to be a link — we can add our link destination later. Step 1 done. Let’s style the link.
With the link selected, let’s create a class so we can use this over and over again. And once we do, let’s set the text color to not blue (something like black, but we can always change this later...). And the reason I’m doing this is because I don’t want it to look like Craigslist. Even so, underlines are a great way to indicate that something’s a link. But, we are removing it because we are going to do the underline differently.
[Grimur] Would it be funny...?
[Sara] Can we come back (to this?)
[Grimur] If at the end of the lesson, we basically recreate Craigslist?
[Sara] I think you think that will be funny.
[Grimur] ...Because they do the blue with the underline?
[Sara] No, I mean, I get it, you (were being...)
[Grimur] Agriculture.
[Sara] ...ironic. But..agriculture?
For us, we will make OUR underline with a BOX shadow. But before we do, let’s demo what happens if we add a BOTTOM border. This pushes DOWN. Let’s undo. Because we’ll show why a BOX shadow is a MUCH better fit. Let’s make sure it’s an INNER shadow. And to kind of RESET this, let’s set ALL our values to 0. And the only thing we’ll add here is a distance (we’ll set it to 2 pixels).
So. What’s happening here? An inner shadow is as big as the box (the boundary of an element — the text). When we move it by 2 pixels, we’re EXPOSING that shadow so it looks like an underline at the bottom. 3 or 4 pixels? Now it’s a thicker underline. 5 or 6 pixels? Even more. 25 pixels? (This is actually what we’ll use later for spoiler text.)
[Grimur] That in itself is a spoiler.
[Sara] You’re right. Back to 2 pixels. And we can style the box shadow however we want. So let’s change our coloring here to get it EXACTLY how we want it to look — keeping in mind, we can always change this later.
And that’s it for this step. We’ve styled it from THIS...to THIS.
Third part. Let’s style what it looks like when we HOVER. Of course, let’s go into the Hover state (what it looks like when we hover OVER the element). And all we want change is the distance. For this effect to work, we want to do just one thing: we WANT to pull up the box shadow (that inner shadow) so it’s now coming up to the top. And if that’s COVERING it, let’s also make a change to the COLOR of our box shadow. (We can play with this later, but for now, this looks okay.)
Let’s hit Escape to go out of the hover state, and if we hover over our link, it’s okay. But we want to move into the NEXT part to do a transition. Because....it’s a little...(abrupt).
Grimur (over): Junky.
[Sara] ...junky?
[Grimur] It’s of poor quality. Junky.
[Sara] Do you mean...janky?
[Grimur] Junky. Useless or of little value. Like JUNK.
[Sara] Janky.
[Grimur] Junky.
[Sara] With the link selected, let’s go down and add an effect (we’re going to add a TRANSITION to animate all of this).
And what this will do is INTERPOLATE — we’ll create an animation BETWEEN the None state and the Hover state. (We’ll select Box Shadow since that’s what kind of transition we want.) And let’s increase the DURATION (let’s do 800 milliseconds — almost a full second). And we can change the easing curve so it’s something more dramatic.
And now if we escape out and hover over? It’s a clear transition.
And since we made it a CLASS, we can APPLY that class to another link. (We can just add another link somewhere else, and then add the class we created for the FIRST one.) And when we do, the style, INCLUDING the transition...everything is matched.
And that takes us to spoilers.
And the spoiler tag method is taking EVERYTHING we just learned and doing it a bit backwards.
Here’s a paragraph, here’s a spoiler.
[Grimur] WHAT?!
[Sara] Let’s select the spoiler, and do the same thing here: create a link.
We’ll go over and create a new class (called SPOILER), and then we’re going to do the BACKWARDS version of our box shadow trick. Again, we want to go in and zero out most of our values here, and we want to use DISTANCE to pull up (or rather COVER) the text. So before, we did the thin underline here and only covered things on HOVER. In THIS example, we’re covering everything in the NONE state.
And for the last part here? We want to make sure that when someone clicks on this link, it SHOWS the spoiler text. (We’re not using HOVER because it won’t work with keyboard navigation, AND someone might accidentally hover over a spoiler and their life will be ruined.)
[Grimur] I know the feeling. Season 3 finale of LOST.
[Sara] Exactly, Grimur. But I have no idea what you’re talking about. If we are going into the box shadow properties, we can ZERO OUT the distance — this means we went from fully covering the text to NOT covering the text.
And if we go over to Preview? Spoiler text. If we click on it? Revealed. If we click out? Spoiler text.
Now. I want to click over to a different example here with LOTS of spoilers in a paragraph. And this time, I’ll tab through to show how this works with KEYBOARD navigation. Keep in mind: spoiler text will STILL be read by screen reading software like VoiceOver, so take that into account before you write that Leonardo DiCaprio dies at the end of Titanic.
[Grimur] What?
[Sara] But that’s it. We covered how to create our hover link, how to use box shadows to create an underline, how to style a hover overlay, how to set a transition to ANIMATE, and finally, we covered SPOILER tags.
Now we cover ALL of this — and tons more you can do with shadows, interactions, animations — ALL of this...on Webflow University. So check out our 101 Crash Course if you haven’t already.
But that’s creating animated underlines and spoilers...in the Webflow Designer.
