Table of contents
Efectos de sombra
Con CSS puedes agregar sombras al texto y a los elementos.
En estos capítulos aprenderás acerca de las siguientes propiedades:
text-shadowbox-shadow
Sombras de texto
La propiedad text-shadow de CSS aplica sombra al texto.
En su uso más simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px):
Ejemplo:
h1 {
text-shadow: 2px 2px;
}
A continuación, agregue un color a la sombra:
Ejemplo:
h1 {
text-shadow: 2px 2px red;
}
Luego, agrega un efecto de desenfoque a la sombra:
Ejemplo:
h1 {
text-shadow: 2px 2px 5px red;
}
El siguiente ejemplo muestra un texto blanco con sombra negra:
Ejemplo:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
El siguiente ejemplo muestra una sombra de brillo de neón rojo:
Ejemplo:
h1 {
text-shadow: 0 0 3px #FF0000;
}
Múltiples sombras
Para agregar más de una sombra al texto, puedes agregar una lista de sombras separadas por comas.
El siguiente ejemplo muestra una sombra luminosa de neón roja y azul:
Ejemplo:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
El siguiente ejemplo muestra un texto blanco con una sombra negra, azul y azul oscuro:
Ejemplo:
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
También puedes usar la propiedad text-shadow para crear un borde simple alrededor de un texto (sin sombras):
Ejemplo:
h1 {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Resumen
En este curso avanzado de CSS, se explican las propiedades text-shadow y box-shadow para agregar sombras a los elementos. La propiedad text-shadow puede aplicar sombras al texto con diferentes efectos, como desenfoque o múltiples sombras. También se puede utilizar para crear un borde simple alrededor del texto. Todo esto se muestra en ejemplos prácticos.
Traducido con 💚 desde W3Schools.com