No CSS, o box shadow CSS é uma propriedade utilizada para adicionar sombras internas (inner shadow) ou ao redor (drop shadow) de um elemento HTML. Trata-se de um recurso que permite construir efeitos interessantes, como o deslocamento ou o desfoque da sombra, a definição da cor e muito mais. Por isso, ele é capaz de tornar a aplicação web mais elegante!

Apesar de existirem diversas ferramentas online que geram códigos CSS automaticamente, é importante que as pessoas que desenvolvem aplicações front-end entendam como essa propriedade funciona. Por isso, preparamos este conteúdo que contém os seguintes tópicos:

Continue com a gente e boa leitura!         

O que é a propriedade box shadow CSS?

A propriedade box-shadow é utilizada para inserir uma camada de sombra ao redor do elemento HTML. O efeito pode ser configurado para ser aplicado nos quatro lados do elemento ou apenas na posição desejada. A propriedade contém alguns atributos auxiliares que ajudam a definir como o sombreamento será aplicado.

Qual é a sintaxe dessa propriedade?

A sintaxe da propriedade box-shadow é:

box-shadow: [inset][h-offset][v-offset][blur][spread][color];

Por exemplo:

box-shadow: inset 0 0 10px 10px blue;

No qual:

  • inset: não é obrigatório e deve ser utilizado para indicar que a projeção da sombra será direcionada para dentro do elemento. Caso seja omitido, o valor padrão será considerado como outset, em que a sombra é projetada para a parte externa do elemento;
  • h-offset: indica a distância em relação ao elemento e ao eixo horizontal em que a sombra será projetada;
  • v-offset: funciona como o atributo anterior, porém, em relação ao eixo vertical;
  • blur: indica o quanto a sombra terá o efeito borrado e é visualizado em todos os lados do elemento;
  • spread: representa a extensão do tamanho da sombra;
  • color: determina a cor da sombra.

É importante dizer que é possível aplicar mais que um efeito em um mesmo elemento. Para isso, basta separar por vírgula os valores dos atributos. Por exemplo:

box-shadow: 5px 5px 10px green, 
            -5px 0 darkgreen;

Quais são os valores da propriedade box shadow CSS?

A propriedade CSS box-shadow contém uma série de valores que são essenciais para a criação do efeito de sombra. Confira como eles funcionam!

A sombra não é exibida: none

Por padrão, os elementos HTML têm a propriedade box-shadow com o valor none, ou seja, não há a exibição de sombras.

box-shadow: none;

Configurando o deslocamento horizontal da sombra: h-offset

O deslocamento horizontal corresponde ao ponto de origem para a projeção da sombra. Quando o valor é positivo, indica que o deslocamento será à direita e se for negativo, significa que a sombra será deslocada para o lado esquerdo.

É importante dizer que esse atributo deve ser utilizado em conjunto com o atributo v-offset, mesmo que o valor atribuído a ele seja 0, pois ele representa o deslocamento vertical.

box-shadow: 10px 0 gray; /* deslocamento de 10px à direita. */
box-shadow: -10px 0 gray; /* deslocamento de 10px à esquerda. */

Configurando o deslocamento vertical da sombra: v-offset 

O deslocamento vertical é definido pelo atributo v-offset. Como mencionamos, ele deve ser utilizado em conjunto com o atributo h-offset para indicar o deslocamento horizontal.

Quando o valor de v-offset for positivo, indica que o deslocamento será para baixo, ou seja, a sombra será projetada em direção à parte inferior do elemento. Já se o valor for negativo, a projeção da sombra será na parte superior do elemento.

box-shadow: 0 10px gray; /* deslocamento inferior de 10px */
box-shadow: 0 -10px gray; /* deslocamento superior de 10px */

Configurando o desfoque na sombra: blur 

O atributo blur é utilizado para aplicar o efeito borrado na sombra. Para que ele funcione, é preciso definir os valores das propriedades v-offset e h-offset, mesmo que elas sejam definidas como zero. Nesse cenário, o efeito blur será apresentado em todos os lados do elemento e de acordo com o tamanho indicado.

Vale ressaltar que não é possível definir valores negativos para esse atributo. Além disso, quanto maior for o seu valor, maior será o efeito borrado aplicado na sombra.

box-shadow: 0 0 10px gray; /* blur de 10px ao redor do elemento. */
box-shadow: 15px 15px 10px gray; /* blur de 10px e deslocamento à direita de 15px. */

Configurando o tamanho da sombra: spread 

O atributo spread é utilizado para definir o valor excedente para a sombra. O valor padrão é zero, o que significa que o tamanho da sombra corresponde ao tamanho do elemento. Portanto, se tivermos um elemento de 300px de largura e comprimento e definirmos spread igual a 20px, a sombra projetada terá o valor correspondente a 320px.

box-shadow: 15px 15px 10px 20px gray;

Definindo a cor da sombra: color

O atributo color é utilizado para definir a cor da sombra. Se não for definido um valor, o navegador utilizará a cor indicada na propriedade color do elemento principal da aplicação ou, se também não houver uma definição, aplicará a cor padrão usada pelo navegador, que geralmente é preto ou transparente, no caso do Safari.

O ideal é definir a cor da sombra na propriedade box-shadow para evitar falhas em função do navegador utilizado pela pessoa usuária.

box-shadow: 15px 15px 10px gray;  /* a cor da sombra é cinza. */

Transformando uma sombra externa em uma sombra interna: inset 

Como mencionamos, se nada for especificado na propriedade box-shadow, a sombra será projetada no lado externo do elemento. Entretanto, é possível inverter a projeção para o lado interno. Para isso, devemos utilizar o atributo inset antes de definirmos os valores para o formato da sombra.

box-shadow: inset 0 0 20px gray; /* sombra interna cinza, com blur de 20px. */

Redefinindo a propriedade para o valor padrão: initial 

A propriedade box-shadow pode ser redefinida para o valor padrão definido pelo navegador. Para isso, basta atribuir o valor initial à propriedade.

box-shadow: initial;

Herdando a propriedade de seu elemento pai: inherit

Um elemento pode herdar as características da propriedade box-shadow do elemento pai. Para isso, devemos definir seu valor como inherit.

box-shadow: inherit;

Como funciona a interpolação com box shadow?

Ao fazer um processo de animação de sombras em um elemento, como o de um efeito hover ou pulse, entre outros, há a transição entre o estado inicial da propriedade e o estado final. Durante esse processo, o navegador realiza uma série de cálculos e aplica várias vezes a propriedade modificada sobre o elemento até que ele atinja o resultado desejado, dentro do tempo definido para a animação.

Por exemplo, imagine que definimos o blur de um elemento como 20px e queremos que, ao posicionar o mouse sobre ele, o efeito desapareça para que a cor fique sólida e que essa ação seja feita em um tempo de 0.6 segundos.

Para que o efeito seja suave e gradativo, o navegador cria uma lista com os valores intermediários para incrementar o valor de blur até que ele atinja a característica desejada. Tudo isso é feito pelo navegador e de forma transparente para a pessoa usuária. Veja um código de exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Box-shadow</title>
    <style>
        .box{
            width:150px;
            height: 150px;
            margin: 50px auto;
            border: 1px solid green;
        }
        .shadow-interpolacao{
            box-shadow: 15px 15px 20px red; 
        }
        .shadow-interpolacao:hover{
            box-shadow: 15px 15px 0 green, -15px -15px green;
            -webkit-transition : box-shadow ease-out 0.6s;
            transition : box-shadow ease-out 0.6s;        
        }
        .shadow-interpolacao2{
            box-shadow: 15px 15px 20px red, -15px -15px 20px green;
        }
        .shadow-interpolacao2:hover{
            box-shadow:  15px -15px 0 green,  -15px 15px 20px green;
            -webkit-transition : box-shadow ease-out 0.6s;
            transition : box-shadow ease-out 0.6s;        
        }
    </style>
</head>
<body>
    <div class="box shadow-interpolacao">
        Box shadow
    </div>   
    <div class="box shadow-interpolacao2">
        Box shadow  
    </div>
</body>
</html>

Qual a compatibilidade com os navegadores?

Ao desenvolver aplicações web, é importante observar se os recursos utilizados são suportados pelos navegadores. Realizar essa tarefa pode evitar falhas durante a utilização pela pessoa usuária. Por isso, veja a partir de qual versão a propriedade box-shadow é disponibilizada nos principais navegadores:

  • Internet Explorer: 9;
  • Edge: 12;
  • Firefox: 3.5;
  • Chrome: 4;
  • Safari: 5;
  • Opera: 11.5;
  • iOS Safari: 4;
  • Android Browser: 4;
  • Opera Mobile: 12;
  • Chrome for Android: 88;
  • Firefox for Android: 85;
  • Samsung Internet: 4.

A propriedade box-shadow CSS é um recurso utilizado para criar efeitos interessantes nos elementos HTML. Ela contém uma série de atributos que ajudam a definir com mais precisão o tamanho, a cor e o formato da sombra projetada. Além disso, é possível criar animações com esses efeitos e tornar a página ainda mais interativa e atraente à pessoa usuária.

Gostou do nosso conteúdo sobre a propriedade box-shadow? Então confira nosso post sobre o que é desenvolvimento web e o que é preciso para ingressar nessa carreira!

0 Shares:
Deixe um comentário
Você também pode gostar