Categories
28°C, New York
Home HTML How to use Clip-path In HTML

How to use Clip-path In HTML

Using keyframes :

In this we will achieve a text-reveal effect using clip-path in HTML and CSS by applying the clip-path’ property to the text element with a polygon shape, creating a gradual reveal as defined in the animation.

Example: In this example, we will see how to create text-reveal effects using HTML and CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>Collecting Data</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
          crossorigin="anonymous">
    <style>
        body {
            margin: 0px;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ddd;
        }
  
        .container {
            margin-top: 50px;
            width: 50%;
            height: auto;
        }
  
        .text-typing {
            padding: 20px 30px;
            background: #f5f5f5;
            font-size: 35px;
            font-family: monospace;
            border-radius: 50px;
            overflow: hidden;
            position: relative;
        }
  
        .text-typing p {
            margin: 0px;
            white-space: nowrap;
            clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
            animation: 
typing 4s steps(22, end) forwards, blink 1s infinite;
        }
  
        @keyframes typing {
            0% {
                width: 0%
            }
  
            100% {
                width: 100%
            }
        }
  
        @keyframes blink {
  
            0%,
            100% {
                border-right: 2px solid transparent;
            }
  
            50% {
                border-right: 2px solid #222;
            }
        }
    </style>
</head>
  
<body class="container">
    <div class="text-typing">
        <p>Geeks For Geeks</p>
    </div>
</body>
  
</html>
 






                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
											

											
											

												
How to create text-reveal effect using HTML and CSS ?

												
												

													
													
Text-reveal is a type of effect in which all the alphabets of the text are revealed one by one in some animated way. There are uncountable ways to animate text for this effect. It is up to your creativity how you want the text to reveal. We will look at a basic and easy way to get started.

													
													
												

												
												

													
													


Table of Content


    

  • Using keyframes
    • 

  • Using Clip-path
    • 




													
													
												

												
											

										


										
										

											
Similar Reads

											
											

												
													

														Using keyframes :

													

														In this, we will create a text-reveal effect by wrapping your text in a `

											
											

												
													

														Using Clip-path

													

														...
													

												
											

											
										


									

									

										
Tags:

										
										#Web Technologies
										
										#Web Templates
										

									

									

										

											
											
												
												Using keyframes :