Una de las maravillas del CSS es que podemos hacer que los textos se vean tan espectaculares como si los hubiéramos hecho con Photoshop. Al finalizar serás capaz de colocar sombras espectaculares a cualquier elemento de texto que tú desees. ¡Empezamos!
Poner una sombra a un elemento de texto con CSS3 es tan simple como establecer la propiedad text-shadow, seguidamente estableceremos el desplazamiento horizontal (X-offset), el desplazamiento vertical (Y-offset), el desenfoque (blur) y el color (color). En el orden mencionado para que funcione correctamente.
La sintaxis quedaría de la siguiente manera: Text-shadow: X-offset Y-offset blur color;
Te traemos algunos ejemplos a continuación para verla en acción:
Ejemplo de sombra clásica
Ejemplo 1.
Se trata de un elemento de título h1, al que pondremos una sombra de color rojo.
<!-- Bloque de código eliminado por incompatibilidad -->Sombra de texto totalmente horizontal
Ejemplo 2.
Sombra a la derecha
<!-- Bloque de código eliminado por incompatibilidad -->Sombra a la izquierda
<!-- Bloque de código eliminado por incompatibilidad -->Sombra de texto totalmente vertical
Ejemplo 3.
Sombra hacia abajo
<!-- Bloque de código eliminado por incompatibilidad -->Sombra hacia arriba
<!-- Bloque de código eliminado por incompatibilidad -->Múltiples sombras para texto
Para crear múltiples sombras para un mismo texto simplemente declararemos los estilos de cada sombra separándoles con simples comas (,) de esta forma podemos aplicar dos, tres, cuatro y más sombras a un texto, evidentemente tendremos que jugar con los valores para que el efecto final sea muy atractivo.
Ejemplo de múltiples sombras para texto
<!-- Bloque de código eliminado por incompatibilidad -->A partir de este punto ya estás listo para darle ese efecto de sombras a tus textos y darle otro estilo a tu página.
También puedes visitar nuestro canal de YouTube, donde tenemos tutoriales y clases grabadas de cómo crear páginas web de forma rápida y sencilla.