CSS Text Effect on Background Video
Welcome, dear readers, in this tutorial I am going to show you CSS Text Effect on Background Video. If you want to make such type of design first you have to choose short video clip for background.
CSS text animation involves applying visual effects and motion to text elements on a web page using CSS (Cascading Style Sheets). These animations can enhance the user experience, make the content more engaging, and add a dynamic aspect to the design. There are several CSS properties and features that can be used for text animations.
HTML
<!DOCTYPE html>
<html>
<head>
<title>VIDEO inside Text In HTML5 CSS3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<style type="text/css">
</head>
<body>
<div class="content">
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
</video>
<h1>CSS Text <br>Animation</h1>
</div>
</body>
</html>CSS
body{
background-color: #ddd;
font-family: 'Russo One', sans-serif;
margin:0px;
}
.content{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
video{
object-fit: cover;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
h1{
background:#fff;
text-align: center;
font-size: 220px;
position: absolute;
top:0;
bottom: 0;
right: 0;
left: 0;
display:flex;
align-items: center;
justify-content: center;
mix-blend-mode: screen;
margin: 0;
text-transform: uppercase;
font-weight: bold;
}
@media(max-width: 1062px){
h1{
font-size: 170px;
}
}
@media(max-width: 782px){
h1{
font-size: 120px;
}
}
@media(max-width: 545px){
h1{
font-size: 74px;
}
}