El efecto de texto 3D 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 en 3D. Hoy veremos uno de los métodos más simples y fáciles para crear nuestro texto en 3D.
Enfoque: el efecto de animación de texto 3D está diseñado por la propiedad text-shadow . La razón para aplicar múltiples sombras de texto es para dar un aspecto 3D, ya que si aplicamos solo una sombra de texto única (o unitaria), será la misma para todos los alfabetos presentes en la palabra. Pero para el efecto 3D, queremos un grosor de sombra diferente para cada alfabeto y en cada ángulo (básicamente las coordenadas X e Y y el radio de desenfoque). Ahora veamos la implementación del enfoque anterior.
Código HTML:En este apartado hemos utilizado una etiqueta <h1> con la palabra a la que queremos aplicar el efecto 3D.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>3D Text Effect</title> </head> <body> <h1>GeeksforGeeks</h1> </body> </html>
Código CSS:
- Paso 1: lo primero que hemos hecho es alinear el elemento <h1> para centrarlo y proporcionar el fondo del cuerpo.
- Paso 2: Ahora, aplique una transición al elemento h1. La duración se puede ajustar de acuerdo a su necesidad.
- Paso 3: ahora aplique sombra de texto en el elemento h1. El concepto de aplicar múltiples sombras de texto ya se ha explicado en el enfoque al comienzo del artículo.
Sugerencia: Tenemos que elegir aplicar un efecto para que sea visible solo al pasar el mouse por encima, pero si desea que el efecto sea visible todo el tiempo, elimine el selector de desplazamiento.
CSS
<style>
body {
background: green;
}
h1 {
margin: 300px auto;
text-align: center;
color: white;
font-size: 8em;
transition: 0.5s;
font-family: Arial, Helvetica, sans-serif;
}
h1:hover {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,
0 3px 0 #ccc, 0 4px 0 #ccc,
0 5px 0 #ccc, 0 6px 0 #ccc,
0 7px 0 #ccc, 0 8px 0 #ccc,
0 9px 0 #ccc, 0 10px 0 #ccc,
0 11px 0 #ccc, 0 12px 0 #ccc,
0 20px 30px rgba(0, 0, 0, 0.5);
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un efecto de animación de texto en 3D al pasar el mouse por encima.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D Text Effect</title>
<style>
body {
background: green;
}
h1 {
margin: 300px auto;
text-align: center;
color: white;
font-size: 8em;
transition: 0.5s;
font-family: Arial, Helvetica, sans-serif;
}
h1:hover {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,
0 3px 0 #ccc, 0 4px 0 #ccc,
0 5px 0 #ccc, 0 6px 0 #ccc,
0 7px 0 #ccc, 0 8px 0 #ccc,
0 9px 0 #ccc, 0 10px 0 #ccc,
0 11px 0 #ccc, 0 12px 0 #ccc,
0 20px 30px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA