Con CSS puedes agregar sombra al texto y a los elementos. En estos capítulos aprenderá acerca de las siguientes propiedades:
- text-shadow
- box-shadow
La propiedad text-shadow aplica sombra al texto. En su uso más simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px).
Ejm
h1 { text-shadow: 2px 2px; }
Ahora añadimos un color a la sombra
h1 { text-shadow: 2px 2px red; }
Ejm con múltiples sombras
h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; }
La propiedad box-shadow se utiliza para aplicar una o más sombras a un elemento.
Para especificar una sombra horizontal y vertical podemos utilizar la siguiente sintaxis.
div { box-shadow: 10px 10px; }
Para especificar un color a la sombra utilizamos la siguiente sintaxis
div { box-shadow: 10px 10px lightblue; }