Box Shadow

Um pequeno estudo sobre uso de sombras

Interação com a luz é a maneira como vemos as coisas, nessa interação com a luz é comum a geração de sombras sobre os objetos, o uso de sombras em interfaces Web trás uma sensação de volume e elevação

Conceito

A propriedade box-shadow do CSS projeta uma cópia do elemento com uma cor única

box-shadow: 
  <deslocamento-horizontal> 
  <deslocamento-vertical> 
  <raio de desfoque> 
  <raio de espalhamento> 
  <cor>;

Detalhamento dos atributos

  • deslocamento horizontal: Quando a sombra está projetada para direita quando positivo e esquerda para valores negativas
  • deslocamento vertical: Quando a sombra está projetada para baixa quando positivo e cima para valores negativas
  • raio de desfoque: Quando a sombra possui desfoque devido a difusão da luz, a irregularidade de inscidência dela
  • raio de espalhamento (opcional): Tamanho adicional para a sombra, somando medida apartir do centro ou reduzindo da borda quando negativo, uma boa indicação de ângulo da luz sobre o objeto
  • cor: Cor da sombra, lembrado a possiblidade de controlar opacidade pela cor

Incidência de luz

Podemos usar para projetar uma sombra e indicar luz

Ambiente

Chave

Combinação

Luz Ambiente

É a luz vindo sem direcionamento de todos os ângulos criando uma sombra difusa, fazemos ela sem colocar deslocamento

box-shadow: 0 0 8px 1px #000003f;

Luz Chave

Uma luz chave é direcionada, com deslocamento na direção oposta da luz, no caso vindo de cima e do lado direito para fazer essa vamos colocar o deslocamento da direita (4px) e para baixo (4px)

box-shadow: 4px 4px 8px 1px #000003f;

Exemplos da direção das luzes

Topo-Direita

Topo-Esquerda

Baixo-Direita

Baixo-Esquerda

Várias fontes de luzes

Baixo-Direita e Baixo-Esquerda

Luz Combinada

Junção das luzes ambientes e luz chave, adicionando as duas sombras como uma lista separado por vírgula

box-shadow: 0 0 8px 1px #000003f, 
  4px 4px 8px 1px #000003f;

Luz de fundo

Um objeto com uma fonte de luz uniforme vindo de trás, como uma sanca no teto

Usamos uma sombra sem deslocamentos com desfoque e espalhamento

box-shadow: 0 0 8px 4px #de128c;

Iluminação interna

Com as luzes vindo de forma regular internamente das margens

Basta incluir o inset para frente dos atributos

box-shadow: inset 0 0 8px 4px #de128c;

Objetos espelhos

As sombras podem ser usadas para desenhar novos objetos com o mesmo formato

Podemos fazer o espalhamento um como positivo para aumentar e outro como negativo para reduzir o tamanho da sombra

box-shadow: -120px 0 0 10px #de128c, 
  100px 0 0 -10px #de128c;

Efeito de elevação com mouse

Para mudança de elevação podemos aumentar o desfoque da luz ambiente e deslocamento e desfoque para a luz chave, como no exemplo ao passar o mouse

Passe o mouse

Elemento HTML com a classe card-box-shadow

<div class="card-box-shadow"></div>

Estilo com transition de 300ms hover para um efeito suave passando a impressão que está subindo

.card-box-shadow {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    box-shadow: 0 0 8px 1px #000003f, 
      8px 8px 16px 2px #000003f;
    transition: box-shadow 0.3s;
}

.card-box-shadow:hover {
    box-shadow: 0 0 16px 2px #000003f, 
      16px 16px 32px 4px  #000003f;
}

Pequeno exemplo

Uma pequena chama com sombras, ou luzes :)

Segue o CSS

.fire {
  width: 50px;
  height: 50px;
  background: #ffb726;
  border-radius: 15% 75% 50% 75%;
  transform: rotate(45deg);
  box-shadow: -10px -10px 0 15px #ff7d17,
    -20px -20px 0 30px #ff6236,
    -30px -30px 10px 45px #ff62343f;
}

Referências

W3Schools - Box Shadow
Material Designer - Light and shadows

Comentários