Sombras

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:

1. Deslocamento horizontal: um número positivo o empurra pela esquerda e um número negativo o empurra pela direita.
2. Deslocamento vertical: um número positivo o empurra de cima para baixo, e um número negativo o empurra de baixo para cima.
3. Raio de desfoque: um número maior produz uma sombra mais desfocada, enquanto um número pequeno produz 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 o diminui, tornando-a do mesmo tamanho que o raio de desfoque, se definido como 0.
5. 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