There is no limit to the types of effect you can create for the text in your website. You can make it glow, shatter or apply any animation to it. Another attention grabbing effect is knockout text which is discussed in this post.
Knockout text is a text effect in which the text allows the background underneath to be visible through it. It gives an impression as if a background knocks out the text above it to create holes so that it becomes visible through them.
It is pretty easy to implement and requires minial knowledge of CSS. In this post, I'll be discussing two methods to create knockout texts. So, let's go through them.
# Using CSS mix-blend-mode
One way is to use the CSS mix-blend-mode property, which is used to blend the content of one element with that of another element.
To begin with, create a div with a background image. Then create a pcontaining some text and red background inside the div.
HTML
<div>
<p>Hey there!</p>
</div>
CSS
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
div {
background: url('../painting.jpg') repeat;
padding: 10px;
}
p {
margin: 0;
padding: 30px;
background: red;
font-family: 'Abril Fatface', cursive;
font-size: 80px;
color: white;
font-weight: bold;
}
See the Pen Random stuff by Aakhya Singh (@aakhya) on CodePen.
Give mix-blend-mode: multiply to the paragraph to get the knockout effect. You can give any other value as well to the mix-blend-mode property.
CSS
p {
mix-blend-mode: multiply;
}
See the Pen Creating knockout text with mix-blend-mode by Aakhya Singh (@aakhya) on CodePen.
The background image of the div is further animated from left to right.
CSS
div {
-webkit-animation-name: moving-background;
animation-name: moving-background;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/* background image animation */
@-webkit-keyframes moving-background {
0% {background-position: left center;}
100% {background-position: right center;}
}
@keyframes moving-background {
0% {background-position: left center;}
100% {background-position: right center;}
}
See the Pen Knockout Text with moving Background by Aakhya Singh (@aakhya) on CodePen.
So, this beautiful knockout text with a moving background can be created in less than five minutes.
Now let's move to method number two.
# Using CSS background-clip
This effect can also be created using the CSS background-clip property, which is used to specify the area within which background is displayed.
Create a p with some text and a background image.
HTML
<p>Hey there!</p>
CSS
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
p {
margin: 0;
padding: 30px;
background: url('../painting.jpg') repeat;
font-family: 'Abril Fatface', cursive;
font-size: 80px;
font-weight: bold;
}
See the Pen Random stuff by Aakhya Singh (@aakhya) on CodePen.
Make the color of the text transparent and give -webkit-background-clip: text to the paragraph so that its background gets clipped to the shape of the text.
CSS
p {
color: transparent;
-webkit-background-clip: text;
}
See the Pen Creating knockout text with -webkit-background-clip by Aakhya Singh (@aakhya) on CodePen.
Animate the background image of the paragraph using the following code.
CSS
div {
-webkit-animation-name: moving-background;
animation-name: moving-background;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/* background image animation */
@-webkit-keyframes moving-background {
0% {background-position: left center;}
100% {background-position: right center;}
}
@keyframes moving-background {
0% {background-position: left center;}
100% {background-position: right center;}
}
See the Pen Knockout Text with moving Background by Aakhya Singh (@aakhya) on CodePen.
Which Technique To Use?
The main difference between the two techniques is that the latter removes the entire background present around the text while the former leaves the background which can be used to blend or to apply some animation to.
Although -webkit-background-clip is an unofficial property, using it is the traditional and actual knockout text technique. mix-blend-mode is a better method to achieve this effect due to a wide range of styles that can be applied along with it, if the background surrounding the text doesn't trouble you.
Other Cool Examples
This is a changing gradient color background clipped out to the shape of the text.
See the Pen Knockout Text Example by Aakhya Singh (@aakhya) on CodePen.
Notice a video playing behind the text in the following demo.
See the Pen Knockout Text Example by Aakhya Singh (@aakhya) on CodePen.
This is really a cool background clipping effect giving the look of a galaxy.
See the Pen Knockout Text Example by Aakhya Singh (@aakhya) on CodePen.
This makes it appear as if the text having a black background is given gradient colors.
See the Pen Knockout Text Example by Aakhya Singh (@aakhya) on CodePen.
The following effect of some text emerging out of the background is achieved by giving shadow to the text.
See the Pen Knockout Text Example by Aakhya Singh (@aakhya) on CodePen.
And the list is limitless. Infinite effects can be created by combining some other effects. For example, gradients, text blurring and background rotation animation can be combined to produce an impressive typography effect. Come up with your own ideas and do share in the comment section if you have created anything creative using the techniques discussed in this post.
