HTML é o idioma usado para fornecer a estrutura das páginas da web, e o CSS nos permite aplicar estilos aos elementos. Em uma página da web, diferentes valores de propriedades são definidos para aplicar estilos diferentes, como cores de fundo, tamanho de fonte, borda, radio de fronteira e shadow de caixa é um deles.

Este blog discutirá o método para aplicar efeitos de sombra aos elementos HTML.

Como soltar o efeito de sombra nos elementos HTML usando CSS?

O "Sombra da caixa”A propriedade adiciona uma sombra em torno de um elemento em que dois ou mais valores de efeito adicionados podem ser separados por vírgulas.

A sintaxe da propriedade de sombra de caixa é descrita abaixo.

Sintaxe

Shadow Box: Nenhum | H-Offset V-O-Offset Blur Sprening Color | Inserção | Inicial | Inharia;

A descrição da sintaxe acima mencionada está listada abaixo:

• ““nenhum”: É o valor padrão da propriedade de shadow box.
• ““Offset H”: Este valor representa a distância horizontal.
• ““Vofset V”: Este valor define a distância vertical.
• ““borrão”: O terceiro valor é um borrão. Maximizar seu valor maximizará o efeito desfoque.
• ““espalhar”: O quarto valor representa a spread de sombra. Pode conter valores positivos ou negativos, onde o valor positivo aumenta a propagação, e um valor negativo diminui.
• ““cor”: Este valor é opcional, representando a cor atual.
• ““inicial”: Este valor define a propriedade de seu valor inicial.
• ““herdar”: Este valor herda a propriedade de seu elemento pai.
• ““inserir”: O valor inserido é usado para fazer sombras dentro da caixa.

Vamos ver como o efeito das sombras parece através de um exemplo prático.

Exemplo

No arquivo html, primeiro, adicione um “”. Dentro deste elemento, adicione

e

Tags para fornecer conteúdo para a página da web.

Html

A sombra da caixa

Shadow Box: 3px 8px

Agora, aplique as propriedades CSS aos elementos HTML adicionados.

CSS

div
Shadow Box: 3px 8px;

O elemento div é aplicado com a propriedade “Sombra da caixa"Com o valor"3px 8px”, Que representa o deslocamento horizontal e o deslocamento vertical.

Saída

Na próxima seção, os elementos HTML serão estilizados com diferentes propriedades.

CSS

div
borda: 5px RGB sólido (255, 111, 1);
Shadow de caixa: 3px 8px 9px 4px #f4af1b;

A seguir, estão as propriedades CSS adicionais aplicadas ao elemento div:

• ““fronteira”A propriedade recebe o valor de 5px RGB sólido (255, 111,1), onde 5px indica a largura da borda, o sólido representa o estilo da borda e RGB (255, 111, 1) é a cor da cor.
• ““Sombra da caixa”A propriedade com o valor 3px 8px 9px 4px #f4af1b representa o deslocamento H como 3px, o deslocamento V como 8px, Blur como 9px, espalhado como 4px e #f4af1b especifica a cor da cor.

O código acima foi exibido o elemento div, como mostrado abaixo:

Agora, na próxima seção, crie duas caixas representando dois elementos div. Daremos a cada um com diferentes valores de madrugada múltipla e observaremos os resultados.

Html

A sombra da caixa

Shadow de caixa: 3px 8px 9px 4px #f4af1b

A sombra da caixa

Shadow de caixa: 3px 8px 9px 4px #f4af1b

Estilo box1 div

#box1
largura: 40%;
Altura: 140px;
Border: 5px Solid #FF9C83;
Shadow de caixa: 8px 10px 15px 20px #807F7F;

Aqui:

• ““#Box1”É usado para acessar a div com caixa de identificação1.
• ““largura”A propriedade é utilizada para o cenário da largura do elemento.
• ““altura”Propriedade define a altura do elemento.
• ““fronteira”É dado valor 5px Solid #ff9c83, onde 5px indica a largura da borda, o sólido representa o estilo da borda e #ff9c83 é a cor.
• ““Sombra da caixa”A propriedade será definida como“8px 10px 15px 20px #807f7f”Onde 8px é o deslocamento horizontal, 10px é o deslocamento vertical, 15px é o efeito do desfoque, 20px é o efeito de espalhamento e #807F7f é a cor da sombra.

Estilo box2 div

#box2
largura: 40%;
Altura: 140px;
borda: 5px RGB sólido (255, 111, 1);
Shadow de caixa: inserção 4px 8px #f4af1b;
margem-esquerda: 350px;

Pode -se observar que denominamos o Box2 Div com as mesmas propriedades:

Dica de bônus: Adicionando várias sombras no elemento HTML

O "Sombra da caixa”A propriedade pode ser utilizada para adicionar vários efeitos de sombra a um elemento HTML. Isso pode ser feito usando vírgulas entre todas as sombras, como mostrado no exemplo abaixo:

Box-Shadow: 6px 6px RGB (91, 0, 143), 12px 5px RGB (201, 8, 8), 16px 16px 8px RGB (226, 213, 29);

Como você pode ver, várias sombras foram aplicadas com sucesso:

Isso foi tudo sobre o uso da sombra da fronteira do CSS.

Conclusão

O "Sombra da caixa”A propriedade no CSS é utilizada para aplicar efeitos de sombra aos elementos HTML. Essa propriedade consiste principalmente em dois valores que são para compensações horizontais e compensações verticais, mas pode haver vários valores, como efeito desfoque, efeito de raio espalhado, cor e mais. Além disso, você também pode adicionar várias sombras aos elementos usando vírgulas entre cada propriedade de box-shadow. Este artigo explicou a propriedade CSS Box-Shadow com exemplos práticos.