Sombras

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:

1. Deslocamento horizontal: um número positivo a empurra para fora da esquerda e um número negativo a empurra para fora da direita.
2. Deslocamento vertical: um número positivo a empurra de cima para baixo, e um número negativo a moverá de baixo para cima.
3. Raio de desfoque: um número maior produz uma sombra mais desfocada, enquanto um número pequeno gera uma sombra mais nítida.
4. 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.
5. 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