CSS Knockout!

Theodore Roosevelt famously once said that “nothing in the world is worth having or worth doing unless it means effort, pain, difficulty.”

I believe ol’ Teddy had a point, and it’s true that some of the most rewarding experiences you’ll have coding are overcoming the challenges you once thought impenetrable.

With that said, I must confess that deep down I am a simple man who enjoys simple things. And so I would like to share my knowledge on a quick and easy CSS effect that can be a great way for aspiring web developers to add some impressive pizzazz to their applications without any headache whatsoever. What I would like to tell you about is the CSS Knockout Effect.

The CSS Knockout Effect essentially allows us to turn text (such as an <h1> title) into a canvas, where we can “paint” the text with designs or images, rather than just applying a solid colour. See below for an example.

The key here is that we are not actually choosing the colour or design of the text, but instead applying a background to the text and then “knocking-out” the text to reveal what’s behind it. And as I mentioned previously, it is exceedingly easy to do.

First, you’ll want to pick a nice thick font to use for this effect. A font-style that’s too lean will be difficult to read without a solid background, and it also won’t provide a big enough window to get a satisfying view of the background. So pick something nice and juicy, and set the font-size large.

Next, pick the background image you’d like to see through your text. Make sure it’s something that will contrast well with the surrounding container and that’s not too intricate. In your CSS file apply this image as the background to the text the same way you’d apply a background image in any other element. Set it to “no-repeat” so that it doesn’t repeat itself.

Now, even though you’ve added a background image to your text the image itself will not yet be visible because it’s covered by the text (obviously!). In order to see what’s behind the text you’ll need to set the text to transparent. Apply the “-webkit-text-fill-color” property to your text’s CSS and set it to “transparent.”

Finally, add “-webkit-background-clip” and set it’s value to “text.” This property value will set the background image to clip to the outline of the text (rather than to the margins or padding, for instance).

And that’s it! Just a few lines of CSS and you’ve got yourself some personalized text to really make your site standout. You can even swap out your background image for an animated .gif if you prefer (again, the key here is to choose one that’s not too intricate). If you’re interested in getting into some more advanced Knockout Effect styling you can also add some animation and the mix-blend-mode property, but for the bare basics this is all you need!

Related posts:

Apart from been a interesting theme for customers to learn and to understand how your product is made is a great way to start up your Brand into the Transformation process Is amazing once our clients…

An analysis of state-legal medical cannabis programs shows that 85% of the reasons reported for seeking medical cannabis show conclusive scientific evidence that cannabis is an effective treatment…

Both the Public Provident Fund (PPF) and the National Pension System (NPS) can be good options for retirement savings in India. However, they have some differences that you should consider when…