En este post vamos a ver de forma rápida y sencilla como puedes crear un efecto de sombra de texto en CSS con la propiedad text-shadow.
La propiedad text-shadow tiene 4 parámetros principales.
- Distancia del eje horizontal (offset-x)
- Distancia del eje vertical (offset-y)
- Valor del desenfoque
- Color de la sombra
Ejemplo:
test-shadow: 3px 3px 0 #222;Aquí te dejo un video muy cortito sobre como hacer este efecto agregando dos sombras a la vez.
Como menciono en el vídeo, si queremos agregar otra sombra deberemos escribir la propiedad de la siguiente manera:
test-shadow: 3px 3px 0 #222, 5px 5px 0 #ff2044b5;Podríamos agregar una tercera sombra agregando otra coma al final y otros valores, por ejemplo:
test-shadow: 3px 3px 0 #222, 5px 5px 0 #ff2044b5, 7px 7px 7px #f2f2f2;Y así podríamos agregar varias sombras.
Espero que te haya gustado este efecto en CSS, es una buena manera de darle un poco de vida a tus encabezados, textos o cualquier otro elemento de texto.
Ahora te toca practicarlo tu mismo, dime que te ha parecido y si tienes alguna duda ¡Escríbeme en los comentarios!