Lección 18: Sombras
box-shadow
Un estilo para incluir sombras externas o internas.
Quitar.
.elemento {
box-shadow: none;
}
Sobra exterior: posición x, posición y, color.
.elemento {
box-shadow: 2rem 1rem orange;
}
Sobra exterior: posición x, posición y, desenfoque, color.
.elemento {
box-shadow: 2rem 1rem 1rem orange;
}
Sobra exterior: posición x, posición y, desenfoque, tamaño, color.
.elemento {
box-shadow: 2rem 1rem 1rem 3rem orange;
}
Sobra interior: posición x, posición y, color.
.elemento {
box-shadow: inset 1rem 1rem orange;
}
Multisombras.
.elemento {
box-shadow: 1rem 1rem 1rem orange, -1rem -1rem 1rem black;
}
Sombras usando teoría de la luz.
.elemento {
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12)
;
height: 10rem;
width: 10rem;
background: white;
border-radius: 5px;
}
Podéis leer un completo artículo al respecto en css-tricks.
text-shadow
Añade sombra un texto.
posición x, posición y, desenfoque, color.
.elemento {
text-shadow: 1px 1px 2px black;
}
filter: drop-shadow()
Sombra para elementos irregulares.
posición x, posición y, desenfoque, color.
.elemento {
filter: drop-shadow(-1rem -1rem 0.5rem orange);
}
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me invitas a un café? ☕
Puedes hacerlo usando el terminal.
ssh customer@andros.dev -p 5555
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios