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)