Podcast do CSS - 017: Sombras
Digamos que você recebeu um design para construir e, nele, há uma foto de uma camiseta, recortado, com uma sombra projetada. O designer diz a você que a imagem do produto é dinâmica e pode ser atualizado por meio do sistema de gerenciamento de conteúdo, então a sombra projetada também precisa ser dinâmica. Em vez de uma camiseta, a imagem pode ser um visor, um shorts ou qualquer outro item. Como fazer isso com o CSS?
O CSS tem a
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:
Filtro drop-shadow()
.
Isso permite que você faça exatamente o que o designer pediu.
Existem muitas opções quando se trata 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.
Ela funciona em 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 a empurra para fora da esquerda e um número negativo a empurra para fora da direita.
- Deslocamento vertical: um número positivo a empurra de cima para baixo, e um número negativo a moverá de baixo para cima.
- Raio de desfoque: um número maior produz uma sombra mais desfocada, enquanto um número pequeno gera uma sombra mais nítida.
- Raio de propagação (opcional): um número maior aumenta o tamanho da sombra e um número menor a diminui, deixando-o com o mesmo tamanho do raio de desfoque se ele estiver definido como zero.
- Cor: Qualquer valor de cor válido. Se isso não for definido, a cor do texto calculada vai ser usada.
Para fazer uma caixa sombrear 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;
}
Várias sombras
Você pode adicionar quantas sombras quiser usando 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 a box-shadow
Adicionar uma border-radius
à caixa também vai afetar a forma da sombra dela.
Isso ocorre porque o CSS está criando uma sombra com base no formato da caixa
como se a luz estivesse apontando 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 que tem overflow: hidden
,
a sombra também não sairá desse estouro.
<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
.
Funciona apenas em nós de texto.
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
Os valores de text-shadow
são iguais a box-shadow
e estão na mesma ordem.
A única diferença é que text-shadow
não tem valor spread
nem palavra-chave inset
.
Quando você adiciona um box-shadow
, ele é cortado no formato da sua caixa,
mas text-shadow
não tem nenhum recorte.
Isso significa que, se o texto for total ou semitransparente,
a sombra é visível por ela.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
Várias sombras
Você pode adicionar quantas sombras quiser com text-shadow
.
assim como acontece com box-shadow
.
Adicione uma coleção de conjuntos de valores separados por vírgulas,
e criar efeitos de texto bem legais, como texto 3D.
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
Sombra projetada
Para conseguir uma sombra projetada que siga as possíveis curvas de uma imagem,
use o filtro CSS drop-shadow
.
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 dos valores drop-shadow
à propriedade filter
.
Cada sombra usará a última sombra como ponto de referência de posicionamento.
Teste seu conhecimento
Teste seus conhecimentos sobre sombras
Qual valor de sombra abaixo é exclusivo de box-shadow
?
inset
Somente 13 sombras de caixa são permitidas em um elemento por vez.