How to create a cutout text using html and css


HTML CODE

 <!DOCTYPE html>
<html>
<head>
    <title>Cutout Text</title>
    <style type="text/css">
        .image{
            background-image: url(sky.jpg);
            background-size: cover;
            position: relative;
            height: 100vh;
        }
        .text{
            background-color: white;
            color:black;
            font-size: 10vw;
            font-weight: bold;
            width: 50%;
            padding: 10px;
            margin: 0 auto;
            left: 50%;
            top: 50%;
            position:absolute;
            text-align: center;
            transform: translate(-50%,-50%);
            mix-blend-mode: screen;
        }
    </style>
</head>
<body>
 <div class="image">
     <div class="text"> TS DURJOY</div>
 </div>
</body>
</html>

For-Tolet: https://basabaribd.com

No comments

Powered by Blogger.