Skip to main content

Cutout Text Effect | Rustcode

by Rustcode
Cutout-Text-Effect-HTML-CSS-Rustcode

"Cutout Text Effect" is a kind of effect on the text where the text fill with the background. This effect is not used too much nowadays but still, you can use it as an effect on your website. Again this effect doesn't use any kind of plugins this is a pure css effect.

In this effect, we will use some css properties which will help us to create this effect. The most important property is "mix-blend-mode" which is complete this effect.

You can learn more about website development effects if you follow our other article.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Cutout Text Effect | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>
  <div class="text-container">
    <div class="text">WELCOME</div>
  </div>
  <div class="container">
    <h2>Cutout Text Effect</h2>
    <p>This example creates a cutout/knockout text.</p>
    <p>This example does not work in Internet Explorer or Edge.</p>
  </div>
</body>



03. CSS

You can download background image form here.

body{
  padding: 0px;
  margin: 0px;
  font-family: Arial , Helvetica , sans-serif;
}
.text-container{
  background-image: url(bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  position: relative;
}
.text{
  background: white;
  color: black;
  font-size: 6vw;
  font-weight: bold;
  margin: 0px auto;
  padding: 10px;
  width: 40%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50% , -50%);
  border-radius: 6px;
  mix-blend-mode: screen;
}
.container{
  padding: 24px;
}


04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





RELATED POST:

Comments

Post a Comment