Cómo Crear Texto con Fondo de Video
En este tutorial, aprenderás a crear un efecto impresionante de texto con un fondo de video utilizando HTML y CSS.
1. Estructura HTML
Primero, crea un archivo HTML básico y añade la estructura siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text with Video Background</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="showcase">
<video src="images/video.mp4" autoplay loop muted></video>
<h1 class="title">ESPAÑA</h1>
</section>
</body>
</html>
2. Estilos CSS
Luego, crea un archivo CSS llamado styles.css y añade el siguiente código para dar estilo a tu sección:
.showcase {
width: 100%;
height: 100vh;
position: relative;
}
.showcase video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
.title {
width: 100%;
height: 100%;
background-color: #000;
font-size: 100px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
mix-blend-mode: multiply;
}
Nota: Este efecto solo funciona con ciertas combinaciones de colores. Si utilizas texto blanco, usa el modo de mezcla
screen en lugar de multiply.
Para cambiar el modo de mezcla, actualiza la clase .title como sigue:
.title {
mix-blend-mode: screen;
}
3. Estructura de Carpetas
Asegúrate de que tu proyecto tenga la siguiente estructura de carpetas:
/
├── index.html
├── styles.css
└── images/
└── video.mp4
4. Resultado Final
Guarda los archivos y abre index.html en tu navegador para ver el resultado final. Deberías ver el texto "ESPAÑA" con el video de fondo.
0 Comentarios