A sombra projetada é um efeito que remove ou adiciona uma sombra atrás dos elementos HTML selecionados quando renderizados na página da web. Este efeito pode ser alcançado usando o “ drop-shadow() ” método como um valor para CSS “ filtro ” ou usando a propriedade “ Sombra da caixa ' propriedade. Ao utilizar a propriedade “box-shadow”, o aprimoramento visual, a experiência do usuário, a ênfase e o foco podem ser direcionados a um elemento HTML de destino específico.
Este guia demonstra o procedimento para criar um efeito de sombreamento usando a propriedade box-shadow:
-
- Faça um sombreamento sólido usando a propriedade box-shadow
- Faça uma sombra projetada embaçada usando a propriedade box-shadow
- Expanda a área de sombra projetada
Como fazer sombras projetadas em CSS3 usando a propriedade box-shadow?
O ' Sombra da caixa ” permite que o desenvolvedor estabeleça uma hierarquia visual indicando a posição relativa dos elementos na página. Ao usá-lo, os criadores de páginas da Web podem criar a ilusão de objetos projetando sombras nas superfícies, dando aos elementos uma sensação mais interativa.
Sintaxe
A propriedade “box-shadow” tem uma sintaxe de:
Sombra da caixa: [ deslocamento horizontal ] [ deslocamento vertical ] [ raio de desfoque ] [ raio de propagação ] [ cor ] ;
Uma explicação dos termos utilizados na sintaxe acima:
-
- Inicialmente, o “ deslocamento horizontal ” recupera/armazena a posição do eixo X e o “ negativo ” O valor define a sombra para a esquerda e vice-versa.
- O ' deslocamento vertical ” armazena a posição do eixo Y, o valor “ positivo ” define a sombra na direção descendente e vice-versa no caso do valor “ negativo ' valor.
- A seguir, o “ raio de desfoque ” O valor a partir do nome define o desfoque da sombra.
- O ' raio de propagação ” especifica quanto raio a sombra deve expandir.
- O ' cor ” define a cor da sombra, pode ser no “ HSL ' ou ' RGB ” formato também.
Agora, vamos ver alguns exemplos para entender melhor:
Exemplo 1: aplicar sombra projetada sólida usando a propriedade box-shadow
Para definir o sombreamento sólido, apenas as direções e a cor da sombra são inseridas como um valor para o “ Sombra da caixa ' propriedade:
< estilo >.boxShadowExample {
largura: 210px;
borda: 2px cornsilk sólido;
altura: 210px;
cor de fundo: #f0f0f0;
box-shadow: 10px 10px verde-floresta;
}
estilo >
No código acima:
-
- Primeiro, o elemento HTML é selecionado com uma classe de “ boxShadowExample ”. E o valor de “ 210px ” é fornecido ao “ altura ' e ' largura ” propriedades. Além disso, utilize o “ fronteira ' e ' cor de fundo ” propriedades para melhor visualização.
- Em seguida, defina o valor de “ 10px 10px verde floresta ' para o ' Sombra da caixa ” propriedade CSS. O ' 10px ” é o deslocamento horizontal e vertical que determina o local onde a sombra precisa ser aplicada. E a ' verde floresta ” é a cor da sombra.
Após a compilação, a página da Web aparece assim:
A saída confirma que uma sombra projetada do tipo sólido foi colocada usando a propriedade box-shadow.
Exemplo 2: Aplicar sombra projetada desfocada usando a propriedade box-shadow
Para deixar a sombra já aplicada borrada, mais um valor numérico é inserido antes da cor para o “ Sombra da caixa ' propriedade. Visite o código abaixo atualizado:
< estilo >.boxShadowExample {
largura: 210px;
borda: 2px cornsilk sólido;
altura: 210px;
cor de fundo: branco fumaça;
box-shadow: 10px 10px 15px verde-floresta;
}
estilo >
De acordo com o código acima, a sombra agora é “ 15px ' borrado. Após o final da fase de compilação, a página da Web fica assim:
A figura acima mostra que a sombra agora está desfocada.
Exemplo 3: Expandindo a área de sombra projetada
O valor do spread é fornecido ao “ Sombra da caixa ” para expandir a região da sombra. O valor do spread deve estar em formato numérico. Como no trecho de código abaixo, a região de sombra é expandida para “ 20px ”:
< estilo >.boxShadowExample {
largura: 210px;
borda: 2px cornsilk sólido;
altura: 210px;
cor de fundo: branco fumaça;
box-shadow: 10px 10px 15px 20px florestaverde;
}
estilo >
Após a execução, a sombra agora aparece assim:
Como você pode ver, a região da sombra agora foi aumentada em 20px.
Conclusão
O ' Sombra da caixa ” propriedade é utilizada para a criação de um “ sombra projetada ” efeito em elementos HTML selecionados. O ' sombra projetada ” a propriedade aceita cinco valores, “ deslocamento horizontal ”, “ deslocamento vertical ”, “ raio de desfoque ”, “ raio de propagação ' e ' cor ”. Os valores de “deslocamento horizontal” e “deslocamento vertical” definem as dimensões da sombra de onde a sombra projetada deve surgir. O valor de “raio de desfoque” torna a sombra embaçada e o valor de “raio de propagação” estende a região da sombra.