Efeito de sombra da caixa em CSS

Aumentar a experiência do usuário do seu site desempenha um papel vital para chamar a atenção do usuário. Existem várias maneiras de usar para executar esta tarefa. Uma maneira óbvia é embelezar a aparência geral do seu site e isso pode ser feito adicionando cores, imagens, animações no site. Outra coisa interessante que pode melhorar a aparência do site são vários tipos de efeitos de sombra. No CSS, existem dois tipos de efeitos de sombra que são de text-shadow e box-shadow. Neste artigo, vamos contar tudo sobre o efeito de sombra da caixa.

CSS Box Shadow

Com o objetivo de adicionar sombras a vários elementos HTML, use a propriedade de shadow box-shadow. Abaixo, demonstramos várias maneiras que você pode usar para adicionar sombra aos seus elementos html.

Adicionar sombra horizontal e vertical

Para adicionar um efeito de sombra em um certo elemento horizontal e verticalmente, simplesmente dê valores às duas dimensões da propriedade de sombra de caixa. Considere o seguinte exemplo.

Html

Efeito de Sombra da Caixa de Aprendizagem

Aqui estamos simplesmente criando um elemento div para demonstrar o conceito de efeito de sombra de caixa.

CSS

div
Largura: 250px;
Altura: 150px;
preenchimento: 10px;
Background-Color: Bisque;
Shadow Box: 9px 9px;

Usando CSS, estamos fornecendo alguma largura, altura, estofamento e cor de fundo para o elemento div. Por fim, usando a propriedade de sombra de caixa, demos 9px às dimensões horizontal e vertical da sombra. Observe que a sombra terá a mesma cor que o texto presente dentro do elemento div.

Saída

Uma sombra horizontal e vertical foi adicionada ao contêiner Div.

Adicionando cor à sombra

Como já mencionado, por padrão, a cor da sombra será a mesma do conteúdo presente dentro do elemento, no entanto, você pode alterar sua cor especificando-a na propriedade de box-shadow. Use o seguinte snippet de código.

CSS

div
Shadow de caixa: 9px 9px LightseAgreen;

Aqui especificamos a cor da sombra.

Saída

Uma sombra LightAgreen foi adicionada à caixa.

Adicione um efeito desfoque à sombra

Com o objetivo de adicionar Blur à sombra, especifique a intensidade do desfoque na propriedade de shadow box. Siga o exemplo abaixo.

CSS

div
Shadow de caixa: 9px 9px 7px RGB (32, 178, 170);

Nós definimos a intensidade do desfoque para 7px. Observe que o efeito desfoque aumenta à medida que você aumenta a intensidade do desfoque.

Saída

Um efeito desfoque foi adicionado com sucesso.

Alterar o tamanho da sombra

Para alterar o tamanho da sombra, você pode especificar a intensidade de propagação da sombra. A intensidade da propagação define basicamente a propagação da sombra, em vez do tamanho. Aqui está como você faz isso.

CSS

div
Shadow de caixa: 9px 9px 7px 10px LightseGreen;

No código acima, primeiro definimos as dimensões horizontal e vertical da sombra para 9px, depois definimos a intensidade do desfoque para 7px e, finalmente, especificamos a intensidade da propagação como 10px.

Saída

Uma sombra com uma intensidade de propagação específica é aplicada conforme desejado.

Observação: Para diminuir a propagação da sombra, atribua valores negativos ao raio de propagação.

Todos os exemplos mencionados acima estão demonstrando como adicionar uma sombra externa a um elemento. No entanto, você também pode adicionar uma sombra interna a um elemento.

Adicione uma sombra interna

Para esse fim, basta inserir um parâmetro inserido na propriedade Shadow Box. Siga o trecho de código abaixo:

CSS

div
Shadow de caixa: inserção 9px 9px 7px LightseGreen;

Além de definir o tamanho, o raio desfoque e a cor da sombra, transformamos a sombra externa em um interior usando “inserção”.

Saída

Uma sombra interna foi adicionada com sucesso.

Adicionando várias sombras

Para adicionar inúmeras sombras em um elemento, você pode adicionar uma lista de sombras à propriedade de shadow da caixa separada por vírgulas. Aqui está um exemplo.

CSS

div
Shadow de caixa: 6px 6px LightseGreen, 8px 8px Lightsalmon, 12px 12px LightskyBlue;

Aqui estamos adicionando três sombras diferentes, cada sombra tendo um tamanho e cor específicos.

Saída

Múltiplas sombras foram adicionadas com sucesso.

Tendo o conhecimento do raio espalhado, sombra interior e várias sombras, você pode fazer outra coisa divertida com sombras. Considere o exemplo abaixo.

CSS

div
Shadow Box: Insert 6px 6px 10px LightseGreen,
Inserção -6px -6px 10px Lightslategrey;

No código acima, estamos adicionando duas sombras internas no mesmo elemento, mas as duas sombras têm posições e cores diferentes.

Saída

Duas sombras internas foram adicionadas com sucesso.

Conclusão

Com o objetivo de adicionar uma sombra ao elemento HTML, a propriedade CSS Box-Shadow é usada. Você deve especificar o comprimento da horizontal, bem como a dimensão vertical da sombra na propriedade de sombra de caixa. Você também pode adicionar cor e um efeito desfoque à sombra de um elemento. Além disso, a propriedade de sombra de caixa permite aprimorar a propagação de uma sombra ou adicionar uma sombra interna a um elemento. Este tutorial foi projetado para guiá -lo sobre várias maneiras que podem ser usadas para adicionar uma sombra a um elemento.