Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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> 
274 Views
