Podcast do CSS - 017: Sombras
Digamos que você recebeu um design para criar e que há nele a imagem de uma camiseta recortada com uma sombra projetada. O designer informa que a imagem do produto é dinâmica e pode ser atualizada pelo sistema de gerenciamento de conteúdo. Portanto, a sombra projetada também precisa ser dinâmica. Em vez de uma camiseta, a imagem pode ser um visor, um short 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. Portanto, 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 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 para box-shadow
é a seguinte:
- Deslocamento horizontal: um número positivo o empurra pela esquerda e um número negativo o empurra pela direita.
- Deslocamento vertical: um número positivo o empurra de cima para baixo, e um número negativo o empurra de baixo para cima.
- Raio de desfoque: um número maior produz uma sombra mais desfocada, enquanto um número pequeno produz uma sombra mais nítida.
- Raio de propagação (opcional): um número maior aumenta o tamanho da sombra, e um número menor o diminui, tornando-a do mesmo tamanho que o raio de desfoque, se definido como 0.
- Cor: qualquer valor de cor válido. Se isso não for definido, a cor do texto calculada será usada.
Para fazer com que uma caixa sombreie 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 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 a sombra da caixa
Adicionar uma border-radius
à caixa também afeta o formato da sombra.
Isso ocorre porque o CSS está criando uma sombra com base na forma 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 tenha overflow: hidden
,
a sombra 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
.
Ela só funciona 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 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 é recortado de acordo com a forma da caixa,
mas text-shadow
não tem cortes.
Isso significa que, se o texto for totalmente ou semitransparente,
a sombra será visível por ele.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
Várias sombras
É possível 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 alguns efeitos de texto bem interessantes, como texto 3D.
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
Sombra projetada
Para ter 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 de recorte,
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. É possível adicionar quantas sombras quiser, incluindo várias instâncias de valores drop-shadow
à propriedade filter
.
Cada sombra usará a última sombra como um ponto de referência de posicionamento.
Teste seu conhecimento
Teste seu conhecimento sobre sombras
Qual valor de sombra abaixo é exclusivo de box-shadow
?
inset
inset
é uma palavra-chave que também é exclusiva para box-shadow
.São permitidas apenas 13 sombras de caixa em um elemento por vez.