The CSS Podcast - 017: Shadows
Digamos que você recebeu um design para criar e, nele, há uma imagem de uma camiseta recortada com uma sombra. O designer informa que a imagem do produto é dinâmica e pode ser atualizada pelo sistema de gerenciamento de conteúdo. Portanto, a sombra também precisa ser dinâmica. Em vez de uma camiseta, a imagem pode ser um visor ou shorts, ou qualquer outro item. Como fazer isso com CSS?
O CSS tem as propriedades
box-shadow
e
text-shadow
,
mas a imagem não é texto, então não é possível usar text-shadow
.
Se você usar box-shadow
, a sombra estará na caixa ao redor,
não ao redor da camiseta.
Felizmente, há outra opção: o filtro drop-shadow()
.
Isso permite que você faça exatamente o que o designer pediu.
Há muitas opções de sombras no CSS,
cada uma projetada para um caso de uso diferente.
Sombra da caixa
A propriedade box-shadow
serve para adicionar sombras à caixa de um elemento HTML.
Ele funciona com elementos de bloco e inline.
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
A ordem dos valores de box-shadow
é a seguinte:
- Deslocamento horizontal: um número positivo empurra para a esquerda e um número negativo empurra para a direita.
- Deslocamento vertical: um número positivo empurra para baixo a partir da parte de cima, e um número negativo empurra para cima a partir da parte de baixo.
- Raio de desfoque: um número maior produz uma sombra mais desfocada, enquanto um número pequeno produz uma sombra mais nítida.
- Spread radius (opcional): um número maior aumenta o tamanho da sombra, e um número menor diminui, fazendo com que ela tenha o mesmo tamanho do blur radius se ele estiver definido como 0.
- Cor: qualquer valor de cor válido. Se isso não for definido, a cor do texto computado será usada.
Para fazer com que uma caixa de sombra seja uma sombra interna,
em vez da sombra externa padrão,
adicione uma palavra-chave inset
antes das outras propriedades.
/* Outer shadow */
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
/* Inner shadow */
.my-element {
box-shadow: inset 5px 5px 20px 5px #000;
}
Sombras múltiplas
Você pode adicionar quantas sombras quiser com box-shadow
.
Adicione uma coleção de conjuntos de valores separados por vírgulas para fazer isso:
.my-element {
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}
Propriedades que afetam o box-shadow
Adicionar um border-radius
à caixa também afeta a forma da sombra.
Isso ocorre porque o CSS está criando uma sombra com base na forma da caixa,
como se a luz estivesse apontada para ela.
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
Se a caixa com box-shadow
estiver em um contêiner com overflow: hidden
,
a sombra não vai sair desse overflow.
<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.my-parent,
.my-shadow {
width: 250px;
height: 250px;
}
.my-shadow {
box-shadow: 0px 0px 20px 5px darkslateblue;
}
.my-parent {
overflow: hidden;
}
Sombra do texto
A propriedade text-shadow
é muito semelhante à propriedade box-shadow
.
Ele só funciona em nós de texto.
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
Os valores de text-shadow
são iguais aos de box-shadow
e na mesma ordem.
A única diferença é que text-shadow
não tem valor spread
e nenhuma palavra-chave inset
.
Quando você adiciona um box-shadow
, ele é cortado para a forma da caixa,
mas o text-shadow
não tem recorte.
Isso significa que, se o texto for totalmente ou semitransparente,
a sombra vai aparecer.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
Sombras múltiplas
Você pode adicionar quantas sombras quiser com text-shadow
,
assim como com box-shadow
.
Adicione uma coleção de conjuntos de valores separados por vírgulas
e crie efeitos de texto muito legais, como texto 3D.
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
Sombra projetada
Para criar uma sombra projetada que siga as curvas de uma imagem,
use o filtro drop-shadow
do CSS.
Essa sombra é aplicada a uma máscara alfa, o que a torna muito útil para adicionar uma sombra a uma imagem recortada,
como no caso da introdução deste módulo.
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
O filtro drop-shadow
tem os mesmos valores que box-shadow
mas a palavra-chave inset
e o valor spread
não são permitidos. Você pode adicionar quantas sombras quiser,
adicionando várias instâncias de valores drop-shadow
à propriedade filter
.
Cada sombra vai usar a última como ponto de referência de posicionamento.
Teste seu conhecimento
Teste seus conhecimentos sobre sombras
Qual dos valores de sombra abaixo é exclusivo para box-shadow
?
inset
Apenas 13 sombras de caixa são permitidas em um elemento por vez.