Efectos de Sombra CSS
Con CSS se pueden agregar sombras a textos y a elementos. Y para ello, aprenderemos acerca de la siguientes propiedades:
text-shadowbox-shadow
La propiedad text-shadow CSS
La propiedad text-shadow genera sombras a textos. En su uso más simple, se puede especificar la sombra horizontal y la sombra vertical como se muestra en el siguiente ejemplo:
h1 {
text-shadow: 2px 2px;
}
En el siguiente ejemplo, se le agrega color a la sombra:
h1 {
text-shadow: 2px 2px red;
}
Y a continuación, se agrega un efecto de desenfoque o difuminación a la sombra:
h1 {
text-shadow: 2px 2px 5px red;
}
En el siguiente ejemplo, se muestra un texto blanco con sombra en negro:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
El siguiente ejemplo muestra una sombra en rojo como resplandor tipo neón:
h1 {
text-shadow: 0 0 3px #FF0000;
}
Múltiples Sombras
Para agregar más de una sombra al texto, se agregan listas de sombras separadas por comas
En el siguiente ejemplo se muestra una sombra en rojo y una sombra en azul como resplandor tipo neón:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
En el siguiente ejemplo se muestra un texto en blanco con sombra en negro, azul y azul obscuro:
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Se puede usar la propiedad text-shadow para crear un borde plano alrededor de algún texto sin sombra:
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
La propiedad box-shadow CSS
La propiedad box-shadow genera sombra a elementos. En su uso más simple, se puede especificar la sombra horizontal y la sombra vertical como se muestra en el siguiente ejemplo:
div {
box-shadow: 10px 10px;
}
En el siguiente ejemplo, se le agrega color a la sombra:
div {
box-shadow: 10px 10px grey;
}
Y a continuación, se agrega un efecto de desenfoque o difuminación a la sombra:
div {
box-shadow: 10px 10px 5px grey;
}
También se puede agregar sombras con pseudo-elementos ::before y ::after, para crear interesantes efectos.
Las propiedades de Sombra CSS
En la siguiente tabla se lista las propiedades de sombra CSS:
| Propiedad | Descripción |
|---|---|
| box-shadow | Agrega una o más sombras a un elemento. |
| text-shadow | Agrega una o más sombras al texto. |