In today’s tutorial, you’re going to take a plain heading, as seen here, and add a knockout effect, which means you can take any image you’d like and make it appear inside the outline of your text. The example you’ll be using is an image of clouds, and the text you’ll be using are the words, The Cloud.

This is the project on Code Pen you’ll be working with, and here is the URL, which you can also find linked within the Resources section for this video.

In the HTML, there’s a heading one with the class of clip, and your content. In the CSS, there is an h1 style with font, family, size, and color. There’s also this section here, which is a CSS feature query. If you aren’t familiar with the syntax, don’t worry, I’ll explain in more detail shortly.

For now, just noticed the class selector named clip. Located here is empty, and to save you some typing, I put the first two styles right here in the comments. All you have to do is cut both of those and then paste them into the clip class like so.

So you’ll see a background image of clouds appear right behind your heading. This image is 800 pixels wide by 200 pixels high. And right now, the whole thing looks terrible. But that’s going to change in a second.

So go ahead and type: -webkit-background-clip: text;, and you’ll see your background image disappears, which means the clip is working. But the text is still being affected by your h1 color. So you need to force this color to be transparent. Go ahead and type: -webkit-text-fill-color: transparent;. And that’s it. That’s the effect.

The outline of your text is now clipping the image, and you can probably just use this as is. However, I promised you a quick explanation. This clip class is nested inside a CSS feature query. And what the syntax is doing is testing a browser to see if it supports these two features, -webkit-background-clip: text, and -webkit-text-fill-color: transparent.

Both of these are actually well-supported in most modern browsers. And older browsers definitely don’t support the CSS. So it’s important you have this fallback style, and in this case, the fallback is that the first h1 style is what those users will see. So no clipping effect. In fact, no image, just the plain h1.

If you want to learn more about how CSS feature queries actually work, be sure to check out the Resources section for this video. OK, back to our effect. A few things to realize here. If you wanted to reposition this image, you could do it with background-position. And here, I’m toggling the vertical offset between zero and 80% so you can see how that image moves.

Now in this particular image, the background-position doesn’t really change so much, so just delete the whole line but the knowledge may come in useful for your future projects. Again, this is the main effect. You could just stop here, but you’re not going to do that. You’re going to go a little further.

Let’s swap the background image for a background gradient. Wow, look. I actually happen to have one here in my clipboard. I don’t expect you to type all this, so just sit back and watch. And what you’ve got here is a linear gradient that transitions from light green to dark green and back to light green.

But what else could we do here? Let’s try an SVG background image. That’s novel. Again, I happen to have something handy in my clipboard, and I’m going to add this big mess code here, which is a vector SVG. We don’t really have time to talk about all the details here. You can experiment with adding your own patterns using a site like heropatterns.com and svgbackgrounds.com.

One thing you’ll notice is that with a transparent SVG such as this one, you can actually add a different background color in CSS, like so, to make things more interesting. Now at this point, it’s possible that some of you might be thinking Jeremy, man. Is there any way we could take this further? Could you, for example, add a text shadow. So that’s a very terrible idea for multiple reasons, and we should do it. Let’s see what happens.

In our clip class, if you add the text shadow property and give it some values here, 8 pixel, 8 pixel, 2 pixel and the color blue, that looks kind of not great. So let’s keep changing the opacity value here maybe from 1 to 0.2 like so. And there might be some potential here if you keep playing around. Honestly, I’m not so sure. I’m just going to delete it. The point I wanted to make is that you can experiment with all sorts of background images and effects until you end up with something that you like.

That’s it. Thanks for watching. I hope you found it useful. If you like this clip, be sure to check out the rest of the series and also the entire course catalog at Gymnasium. Take care.