Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive cutout/knockout text with CSS?
A responsive knockout text transforms when the web browser size is changed. A knockout text looks like it's been cut out of a surface to reveal the background. First, we will place a background image on the web page using the background-image property. The text will be placed using the position property. To transform, the translate() will be used.
Set the background image
To create a knockout text, first set the background image on which the text will appear. The background image will be included using the background-image property with the url() −
background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
The container for the background image
The container positions the background image using the position property. Set the heigh using the height property −
.image-container {
background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
position: relative;
height: 300px;
}
Place the text
Place the text inside the image container −
<div class="image-container"> <div class="text">FOREST</div> </div>
Position the text
The text is positioned on the image using the position property with the value absolute −
.text {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
}
Transform the text
The knockout text us transformed using the transform property with the translate() method. The translate allows changing the position −
transform: translate(-50%, -50%);
Blend the text
To blend the text with its direct parent background, the mix-blend-mode property is used. The blending mode is set to multiply using the multiply value of the mix-blend-mode property −
mix-blend-mode: multiply;
Example
To create responsive knockout text with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.image-container {
background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
position: relative;
height: 300px;
}
.text {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Cutout Text Example</h1>
<div class="image-container">
<div class="text">FOREST</div>
</div>
</body>
</html>
77 Views
