A propriedade CSS box-shadowpode ser usada para dar aos elementos do bloco uma sombra projetada ou uma sombra interna. Vamos dar uma olhada nesta propriedade CSS.
Exemplos
Abaixo estão três exemplos diferentes de aplicação da box-shadowpropriedade CSS em um arquivo div.
Exemplo 1: Sombra projetada simples
Veja como você pode dar uma divsombra cinza sutil.
box-shadow: 0 0 10px gray;
Exemplo 2: Sombra Interior
Uma sombra interna pode ser renderizada usando o insetvalor da propriedade.
box-shadow: inset 0 0 10px;
Exemplo 3: Sombra projetada de deslocamento
Neste exemplo, a sombra da caixa é projetada com um viés para o lado inferior direito da caixa usando um deslocamento horizontal e um deslocamento vertical de 5px.
box-shadow: 5px 5px 10px;
E se você quisesse ter a sombra na parte superior esquerda da caixa? Podemos fazer isso usando valores negativos para o deslocamento horizontal e o deslocamento vertical. No exemplo a seguir, o deslocamento horizontal e o deslocamento vertical são definidos como -5px.
box-shadow: -5px -5px 10px;
Agora que você viu alguns exemplos de CSS box-shadowem ação, vamos nos aprofundar um pouco mais.
Sintaxe
A sintaxe geral da box-shadowpropriedade é a seguinte:
box-shadow: [inset][horizontal offset][vertical offset][blur radius][spread distance][color];
Valores de propriedade CSS
Apenas dois valores de propriedade são necessários: o deslocamento horizontal e o deslocamento vertical. Quatro valores de propriedade, deslocamento horizontal, deslocamento vertical, raio de desfoque e distância de propagação, devem usar uma unidade de comprimento CSS (por exemplo, px, em, %, etc.) O valor da cor deve ser uma unidade de cor CSS, como um valor hexadecimal (por exemplo, #000000).
inserir
Se o insetvalor da propriedade da palavra-chave estiver presente, a sombra da caixa será colocada dentro do elemento HTML.
box-shadow: inset 0 0 5px 5px olive;
Como referência comparativa, aqui está a mesma sombra de caixa sem a propriedade de inserção:
box-shadow: 0 0 5px 5px olive;
deslocamento horizontal
O valor de deslocamento horizontal controla a posição do eixo x da sombra da caixa.
Um valor positivo deslocará a sombra da caixa para a direita, enquanto um valor negativo a deslocará para a esquerda. No exemplo a seguir, o deslocamento horizontal é definido como 20px ou o dobro do valor do deslocamento vertical (que é definido como 10px), de modo que a sombra é duas vezes mais larga horizontalmente.
box-shadow: 20px 10px;
deslocamento vertical
O deslocamento vertical controla a posição da sombra da caixa no eixo y.
Um valor positivo irá movê-lo para baixo enquanto um valor negativo irá movê-lo para cima. No exemplo a seguir, o deslocamento vertical tem um comprimento de -20px ou o dobro do comprimento do deslocamento horizontal (10px), de modo que o tamanho da sombra é duas vezes maior no eixo vertical. Além disso, como o valor é negativo, a localização da sombra é deslocada para a parte superior da caixa.
box-shadow: 10px -20px;
raio de desfoque
O valor da propriedade do raio do desfoque afeta o desfoque/nitidez da sombra da caixa. O raio de desfoque é opcional. Se você não especificá-lo, o padrão será 0. Além disso, ele não pode ter um valor negativo, ao contrário do deslocamento horizontal e do deslocamento vertical. Se o raio de desfoque for 0, a sombra da caixa será nítida e sua cor será sólida. À medida que você aumenta o valor, ele fica mais borrado e opaco.
No exemplo abaixo, o valor do raio de desfoque é definido como 20px, portanto, o desfoque é bastante pronunciado.
box-shadow: 5px 5px 20px;
distância de propagação
A distância de propagação torna a sombra da caixa maior ou menor em todas as direções. Se tiver um valor positivo, a sombra da caixa aumentará de tamanho em todos os lados.
Se tiver um valor negativo, a sombra da caixa se contrairá em todos os lados. Observe como, por causa da distância de propagação positiva (10px), há uma sombra de 10px em todos os lados da caixa porque não há deslocamento horizontal e deslocamento vertical:
box-shadow: 0 0 10px 5px;
Quando a distância de propagação é negativa, a sombra encolhe em todos os lados. No exemplo a seguir, a sombra é menor que a largura da caixa devido à sua distância de propagação negativa e à ausência de um deslocamento horizontal:
box-shadow: 0 10px 10px -5px;
cor
Como você já pode ver pelo nome, o valor de cor define a cor da sombra da caixa.
Ele pode ser especificado usando qualquer unidade de cor CSS. A especificação de um valor de cor é opcional. Por padrão, em outras palavras, se você não declarar explicitamente um valor de cor para a sombra da caixa, a cor da sombra será igual ao valor da cor do elemento HTML ao qual a box-shadowpropriedade está sendo aplicada na criação de seu site.
Por exemplo, se você tiver um divque tenha a cor de red, a cor da sombra da caixa também será red:
color: red; box-shadow: 0 0 10px 5px;
Se você quiser uma cor de sombra diferente, precisará especificá-la na box-shadowdeclaração do valor da propriedade. Abaixo você pode ver que mesmo que a cor do primeiro plano do divseja ainda red, a cor da sombra da caixa é blue.
color: red; box-shadow: 0 0 10px 5px blue;
