Code Video

Responsive Knockout Text With CSS3

Knockout Text With CSS3 Drake via xopixel.com
.knockout-text-one – Knockout Text With CSS3 Drake
Knockout Text With CSS3 Drake via xopixel.com
.knockout-text-two – Knockout Text With CSS3 Drake

Featured CSS3 Properties

The two featured CSS3 properties that we’ll be using in this tutorial are -webkit-text-fill-color and -webkit-background-clip. The -webkit-background-clip property specifies whether an element’s background image or color extends underneath its border. Read more about this property here.

The -webkit-text-fill-color property is a non-standard CSS3 property. For non-standard properties, it’s recommended that you don’t use it on a web facing project. Also, the behavior of this non-standard CSS property has the potential to change in the future. In other words, use -webkit-text-fill-color for fun personal projects, but not for large scale web design projects where longevity and accessibility are valued. You can read more about this here.

Browser Support

Used together to make this knockout text effect, the -webkit-background-clip and -webkit-text-fill-color is supported in Chrome, Firefox, and Safari. This effect won’t work without using the -webkit- web browser engine.

The HTML5

<body>
 <h1 class="xop-knockout-text-one">DRAKE</h1>
 <h1 class="xop-knockout-text-two">DRAKE</h1>
</body>

The CSS3

h1.knockout-text-one, h1.knockout-text-two {
 color: white;
 margin: 0;
 padding: 0;
 background-size: cover;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 font-size: 28vw;
 text-align: center;
 font-family: 'Oswald', sans-serif;
}

.knockout-text-one {
 background: url('images/drake.jpg')no-repeat;

}

.knockout-text-two {
 background: url('images/drake.gif')no-repeat;
}

Sources

Show & Tell!

Feel free to share a screenshot of what you’ve made using this tutorial in the comments section below! Have any questions or comments? Let’s chat below!

Like this article?

I'm a Content Creator, Front-End Web Developer, UX Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Comments

  1. Great video, keep up with good work!
    I would like to know if there is a way to position a background photo?
    For example, i was using a word “Explore” and for each letter, a different image and I found out that I can only use five basic background-position properties or %. But only one % parameter (ex: background-position: 30%) and not like two ( background-position: 30% 75%). Also is there special picture size that will work almost every time?

    1. Hi Dusan,
      Thanks for bringing that to my attention. I’ve taken a look at the code and I did notice that you can only change one parameter for the background-position property. At first, I was thinking that this might be due to the fact the the -webkit-background-clip and -webkit-text-fill-color are non-standard and there are some kinks in how it functions with other properties. But, this call for some fiddling around with the code to see if there are any bugs and to find some solutions.

      In the meantime, feel free to download a copy of the demo. The photo’s used are provided in the ‘images’ folder. In regards to a special picture size that will work all the time, it really depends on the font size you’re using—but generally, if you’re using a large image, you’ll want to use a large font size so a good amount of the image shows through the text 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.