El efecto de texto multicapa es uno de los efectos de texto más utilizados en el mundo del diseño web. Como diseñador o desarrollador front-end, uno debe saber cómo crear un efecto de texto de varias capas. Hoy veremos uno de los métodos más simples y fáciles para crear el efecto Múltiples capas de texto.
Enfoque: para lograr este efecto de texto, utilizaremos la propiedad text-shadow . El mismo enfoque también se usa para crear un efecto de texto 3D usando HTML y CSS . Como se menciona en el artículo, la belleza de la propiedad de sombra de texto CSS es que esta propiedad se puede aplicar varias veces al mismo DOM HTMLelemento con un grosor, color y ángulo diferente para lograr el aspecto 3D o el efecto de texto de varias capas.
También se ha cubierto un enfoque similar en el efecto de texto de doble capa usando CSS . En este tutorial, implementaremos el efecto de texto de varias capas para un sitio web usando solo HTML y CSS. Suponemos que está familiarizado con las reglas HTML y CSS y tiene un conocimiento básico de la propiedad de sombra de texto CSS .
- Paso 1: Instale Browsersync usando npm . Usaremos Browsersync para iniciar un servidor y proporcionar una URL para ver el sitio HTML, la animación CSS y cargar los archivos JavaScript respectivos. Instalaremos Browsersync globalmente.
npm install -g browser-sync
- Paso 2: Cree un archivo index.html y un archivo index.css en la carpeta raíz de su proyecto.
index.html: agregue el siguiente fragmento de código en ese archivo:
html
<head> <title>GeeksForGeeks</title> <link rel="stylesheet" href="index.css"> </head> <body> <title>GeeksForGeeks</title> <h3>Multilayered Text Effect using CSS</h3> <div>Hello Geeks</div> </body>
- Paso 3: usando CSS, alineamos el elemento div al centro de la pantalla y proporcionamos un estilo de fondo inicial. Como se mencionó anteriormente, simplemente hemos utilizado la propiedad text-shadow de CSS para aplicar el efecto de texto de varias capas como se explicó anteriormente. Hemos hecho cada capa del efecto de texto en un color distinguible para que sea visible. Simplemente podemos agregar la propiedad de desplazamiento CSS para activar este efecto de texto mientras se desplaza sobre la etiqueta HTML div .
índice.css:
CSS
div {
font-size: 12rem;
text-align: center;
height: 90vh;
line-height: 90vh;
color: green;
background: white;
font-family: "Times New Roman", Times, serif;
font-weight: 700;
text-shadow: 5px 5px 0px #eb452b,
10px 10px 0px #efa032,
15px 15px 0px #46b59b,
20px 20px 0px #017e7f,
25px 25px 0px #052939,
30px 30px 0px blue,
35px 35px 0px violet,
40px 40px 0px black;
}
- Paso 4: para iniciar la aplicación mediante Browsersync, ejecute el siguiente comando en el directorio del proyecto:
browser-sync start --server --files "*"
Salida: esto inicia Browsersync en modo servidor y observa todos los archivos dentro del directorio en busca de cambios según lo especificado por el comodín * . La aplicación se iniciará en http://localhost:3000/ de forma predeterminada.
Publicación traducida automáticamente
Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA