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!
Hola David, me pudieras orientar de como hacer cambiar el color a una card y la imagen de otro color al pasar el puntero esto con css
¡Hola José Antonio!
Para cambiar el color de una card y la imagen al pasar el puntero usando CSS, puedes hacerlo con la pseudoclase :hover. Te dejo un ejemplo:
«`css
.card {
background-color: #f5f5f5;
transition: background 0.3s;
}
.card img {
filter: none;
transition: filter 0.3s;
}
.card:hover {
background-color: #FFD700; /* Cambia el fondo de la card */
}
.card:hover img {
filter: grayscale(100%) brightness(1.2); /* Cambia el color de la imagen */
}
«`
Solo adapta los colores o efectos que prefieras. Si necesitas que la imagen cambie a un color específico, dime qué color deseas y te ayudo con el código exacto. ¡Espero que te sea útil!