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:
- O que é a propriedade box shadow CSS?
- Qual é a sintaxe dessa propriedade?
- Quais são os valores da propriedade box shadow CSS?
- Como funciona a interpolação com box shadow?
- Qual a compatibilidade com os navegadores?
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!
