Sombras

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

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

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:

  1. Deslocamento horizontal: um número positivo empurra para a esquerda e um número negativo empurra para a direita.
  2. 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.
  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. 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.
  5. 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

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

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?

Raio de propagação
Deslocamento horizontal
Raio de desfoque
Cor
Deslocamento vertical
inset

Apenas 13 sombras de caixa são permitidas em um elemento por vez.

Falso
Verdadeiro