2.2 KiB
2.2 KiB
| title | localeTitle |
|---|---|
| CSS3 Shadow Effects | CSS3 Shadow Effects |
CSS3 Shadow Effects
Con CSS3 puede crear dos tipos de sombras: text-shadow (agrega shadow a text) y box-shadow (agrega shadow a otros elementos).
CSS3 Text Shadow
La propiedad text-shadow puede tomar hasta cuatro valores:
- la sombra horizontal
- la sombra vertical
- el efecto borroso
- el color
Ejemplos:
- Sombra de texto normal
h1 {
text-shadow: 2px 2px 5px crimson;
}
- Efecto de texto brillante
h1 {
text-shadow: 0 0 4px #00FF9C;
}
Sombras multiples
Para lograr esto, simplemente agregue una coma entre dos (o más) conjuntos de valores:
h1 {
color: white;
text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5;
}
CSS3 Box Shadow
La propiedad box-shadow puede tomar hasta seis valores:
- (opcional) la palabra clave
inset(cambia la sombra a una dentro del marco) - la sombra horizontal
- la sombra vertical
- el efecto borroso
- la propagación
- el color
Ejemplos:
.first-div {
box-shadow: 1px 1px 5px 3px grey;
}
.second-div {
box-shadow: 0 0 5px 1px lightgrey;
}
.third-div {
box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75);
}
Más información:
- Documentos web de MDN
- Compruebe la compatibilidad del navegador
- CSS box-shadow generator (siéntase libre de experimentar con box-shadows)