Las sombras son realmente una buena manera de dar profundidad y un aspecto tridimensional a cualquier texto. Generalmente, usamos text-shadow para dar sombra al texto, pero esta sombra es corta y para crear una sombra larga (sombra en la que el texto es visible como el reflejo) tenemos que usar antes de la función selector y sesgar.
Enfoque: el enfoque consiste en usar un sesgo para crear primero el texto inclinado y luego usar before para crear el texto original cuya sombra se creó usando la función de sesgo.
Código HTML: en esta sección, tenemos nuestro texto envuelto dentro de una etiqueta h1 .
HTML
<!DOCTYPE html> <html> <head> <title>Long Shadow Effect</title> </head> <body> <div class="center"> <h1 data-title="GEEKS">GEEKS</h1> </div> </body> </html>
Código CSS: Para CSS, siga los pasos que se indican a continuación.
- Paso 1: Aplica un fondo grisáceo al cuerpo.
- Paso 2: alinee el texto al centro y use la función de sesgo sobre él.
- Paso 3: cambie el color del texto torcido a una versión ligeramente oscura del color de fondo.
- Paso 4: use antes del selector y establezca el contenido en el valor del atributo de la etiqueta h1 .
- Paso 5: Ahora usa la función de sesgo con el mismo ángulo que el original pero con negación.
Nota: Asegúrese de que el ángulo de inclinación no supere los 70 grados y que el ángulo utilizado en el estilo de la etiqueta «h1» y antes del selector sea el mismo, siendo uno el valor negativo del otro.
CSS
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: rgb(122, 116, 116);
}
.center {
margin: 200px 0 0 350px;
}
h1 {
font-size: 6em;
color: rgba(0, 0, 0, .2);
position: absolute;
margin: 0;
padding: 0;
transform-origin: bottom;
transform: skewX(50deg);
}
h1::before {
content: attr(data-title);
position: absolute;
color: #fff;
transform-origin: bottom;
transform: skewX(-50deg)
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Long Shadow Effect</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: rgb(122, 116, 116);
}
.center {
margin: 200px 0 0 350px;
}
h1 {
font-size: 6em;
color: rgba(0, 0, 0, .2);
position: absolute;
margin: 0;
padding: 0;
transform-origin: bottom;
transform: skewX(50deg);
}
h1::before {
content: attr(data-title);
position: absolute;
color: #fff;
transform-origin: bottom;
transform: skewX(-50deg)
}
</style>
</head>
<body>
<div class="center">
<h1 data-title="GEEKS">GEEKS</h1>
</div>
</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