Como usar CSS box-shadow: 13 truques e exemplos

CSS é a linguagem que os desenvolvedores usam para definir o estilo de uma página da web. Ele controla como os elementos HTML são exibidos na tela, no papel ou em qualquer outra forma de mídia. CSS fornece o poder de personalização total para estilizar a página da web em sua própria imagem.

Você pode alterar a cor de fundo de um elemento, estilo da fonte, cor da fonte, sombra da caixa, margem e várias outras propriedades usando CSS. Nós o orientaremos por meio de alguns usos eficazes da sombra de caixa neste guia.

O que é CSS box-shadow?

O Sombra da caixa propriedade é usada para aplicar uma sombra aos elementos HTML. É uma das propriedades CSS mais usadas para caixas de estilo ou imagens.

Sintaxe CSS:

sombra da caixa: [deslocamento horizontal] [deslocamento vertical] [raio de desfoque] [raio de propagação opcional] [cor];

1. deslocamento horizontal: Se o deslocamento horizontal for positivo, a sombra ficará à direita da caixa. E se o deslocamento horizontal for negativo, a sombra ficará à esquerda da caixa.
instagram viewer
2. deslocamento vertical: Se o deslocamento vertical for positivo, a sombra ficará abaixo da caixa. E se o deslocamento vertical for negativo, a sombra ficará acima da caixa.
3. raio de desfoque: Quanto mais alto for o valor, mais desfocada será a sombra.
4. raio de propagação: Isso significa o quanto a sombra deve se espalhar. Valores positivos aumentam a propagação da sombra, valores negativos diminuem a propagação.
5. Cor: Isso significa a cor da sombra. Além disso, ele oferece suporte a qualquer formato de cor, como rgba, hex ou hsla.

Os parâmetros de desfoque, propagação e cor são opcionais. A parte mais interessante da sombra da caixa é que você pode usar uma vírgula para separar os valores da sombra da caixa qualquer número de vezes. Isso pode ser usado para criar várias bordas e sombras nos elementos.

1. Adicione uma sombra de caixa escura à esquerda, à direita e à parte inferior da caixa

Você pode adicionar sombras muito escuras a três lados (esquerdo, direito e inferior) da caixa usando o seguinte CSS de sombra de caixa com seu elemento HTML de destino:

sombra da caixa: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Resultado:

2. Adicionar uma sombra escura a todos os lados

Você pode adicionar sombras claras a todos os lados da caixa usando o seguinte CSS de sombra de caixa com seu elemento HTML de destino:

box-shadow: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;

Resultado:

3. Adicione uma sombra de caixa fina aos lados inferior e direito

Você pode adicionar sombras na parte inferior e no lado direito da caixa usando o seguinte CSS de sombra de caixa com seu elemento HTML de destino:

sombra da caixa: rgba (0, 0, 0, 0,15) 1,95px 1,95px 2,6px;

Resultado:

4. Adicionar uma sombra de caixa escura a todos os lados

Você pode adicionar sombra escura a todos os lados da caixa usando o seguinte CSS de sombra de caixa com seu elemento HTML de destino:

sombra da caixa: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Resultado:

5. Adicionar propagação de sombra para todos os lados

Você pode adicionar propagação de sombra a todos os lados da caixa usando o seguinte comando com seu elemento HTML de destino:

box-shadow: rgba (0, 0, 0, 0,25) 0px 54px 55px, rgba (0, 0, 0, 0,12) 0px -12px 30px, rgba (0, 0, 0, 0,12) 0px 4px 6px, rgba (0, 0, 0, 0,17) 0px 12px 13px, rgba (0, 0, 0, 0,09) 0px -3px 5px;

Resultado:

6. Adicionar uma sombra de borda fina para todos os lados

Você pode adicionar uma sombra de borda simples a todos os lados da caixa usando o seguinte CSS com seu elemento HTML de destino:

box-shadow: rgba (6, 24, 44, 0,4) 0px 0px 0px 2px, rgba (6, 24, 44, 0,65) 0px 4px 6px -1px, rgba (255, 255, 255, 0,08) 0px 1px 0px inserido;

Resultado:

7. Adicionar uma sombra de caixa aos lados inferior e esquerdo

Você pode adicionar uma sombra aos lados inferior e esquerdo da caixa usando o seguinte CSS de sombra de caixa com seu elemento HTML de destino:

sombra da caixa: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Resultado:

8. Adicione uma sombra escura aos lados superior e esquerdo, e uma sombra escura aos lados inferior e direito

Você pode adicionar uma sombra clara nas partes superior e esquerda da caixa, bem como uma sombra escura nas partes inferior e direita da caixa, usando o seguinte CSS com o elemento HTML de destino:

box-shadow: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0,8) -6px -2px 16px 0px;

Resultado:

9. Adicionar uma sombra de borda fina e colorida em todos os lados

Você pode adicionar uma sombra de borda colorida simples a todos os lados da caixa usando o seguinte CSS de sombra de caixa com seu elemento HTML de destino:

box-shadow: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Resultado:

10. Adicionar várias sombras de borda colorida aos lados inferior e esquerdo da caixa

Você pode adicionar várias sombras coloridas nas bordas inferior e esquerda da caixa usando o seguinte CSS com o elemento HTML de destino:

box-shadow: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px inserido, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px inserido;

Resultado:

11. Adicionar várias sombras de borda colorida na parte inferior

Você pode adicionar várias sombras de borda coloridas na parte inferior da caixa usando o seguinte CSS de sombra de caixa com seu elemento HTML de destino:

sombra da caixa: rgba (240, 46, 170, 0,4) 0px 5px, rgba (240, 46, 170, 0,3) 0px 10px, rgba (240, 46, 170, 0,2) 0px 15px, rgba (240, 46, 170, 0,1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;

Resultado:

12. Adicionar várias sombras de borda colorida aos lados inferior e direito da caixa

Você pode adicionar várias sombras coloridas nas bordas inferior e direita da caixa usando o seguinte CSS com o elemento HTML de destino:

sombra da caixa: rgba (240, 46, 170, 0,4) 5px 5px, rgba (240, 46, 170, 0,3) 10px 10px, rgba (240, 46, 170, 0,2) 15px 15px, rgba (240, 46, 170, 0,1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;

Resultado:

13. Adicionar sombras claras aos lados esquerdo e direito, espalhar sombra na parte inferior

Você pode adicionar sombras claras aos lados esquerdo e direito e espalhar sombra na parte inferior da caixa usando o seguinte CSS de sombra de caixa com seu elemento HTML de destino:

box-shadow: rgba (0, 0, 0, 0,09) 0px 2px 1px, rgba (0, 0, 0, 0,09) 0px 4px 2px, rgba (0, 0, 0, 0,09) 0px 8px 4px, rgba (0, 0, 0, 0,09) 0px 16px 8px, rgba (0, 0, 0, 0,09) 0px 32px 16px;

Resultado:

Integre CSS com uma página HTML

Agora que você sabe como adicionar efeitos legais de sombra de caixa usando CSS, pode integrá-los facilmente a elementos HTML de várias maneiras.

Relacionado: 11 ferramentas úteis para verificar, limpar e otimizar arquivos CSS

Você pode incorporá-lo na própria página HTML ou anexá-lo como um documento separado. Existem três maneiras de incluir CSS em um documento HTML:

CSS Interno

Folhas de estilo incorporadas ou internas são inseridas dentro do seção de um documento HTML usando o elemento. Você pode criar qualquer número de elementos em um documento HTML, mas eles devem ser colocados entre os e Tag. Aqui está um exemplo que demonstra como usar CSS interno com um documento HTML:

Estilo 4

CSS Inline

CSS embutido é usado para adicionar regras de estilo exclusivas a um elemento HTML. Ele pode ser usado com um elemento HTML por meio do estilo atributo. O atributo style contém propriedades CSS na forma de "valor da propriedade" separados por um ponto e vírgula (;).

Relacionado: Aprenda a construir sites bidimensionais com CSS Grid

Todas as propriedades CSS devem estar em uma linha, ou seja, não deve haver quebras de linha entre as propriedades CSS. Aqui está um exemplo que demonstra como usar CSS inline com um documento HTML:

Estilo 4

CSS Externo

CSS externo é a maneira ideal de aplicar estilos a documentos HTML. Uma folha de estilo externa contém todas as regras de estilo em um documento separado (arquivo .css), este documento é então vinculado ao documento HTML usando o marcação. Este método é o melhor método para definir e aplicar estilos aos documentos HTML, pois o arquivo HTML afetado requer mudanças mínimas na marcação. Aqui está um exemplo que demonstra como usar CSS externo com um documento HTML:

Crie um novo arquivo CSS com o .css extensão. Agora adicione o seguinte código CSS dentro desse arquivo:

.cabeçalho {
alinhamento de texto: centro;
}
.image-box {
display: bloco;
margem esquerda: automático;
margem direita: automático;
sombra da caixa: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Por último, crie um documento HTML e adicione o seguinte código dentro desse documento:

Estilo 4

Observe que o arquivo CSS está vinculado ao documento HTML por meio de tag e href atributo.

Todos os três métodos acima (CSS Interno, CSS Inline e CSS Externo) exibirão o mesmo resultado-

Deixe sua página da Web elegante com CSS

Ao usar CSS, você tem controle total sobre o estilo de sua página da web. Você pode personalizar cada elemento HTML usando várias propriedades CSS. Devs de todo o mundo estão contribuindo com as atualizações do CSS, e isso vem acontecendo desde seu lançamento em 1996. Como tal, os iniciantes têm muito que aprender!

Felizmente, o CSS é amigável para iniciantes. Você pode obter uma excelente prática começando com alguns comandos simples e vendo aonde sua criatividade o leva.

10 exemplos de código CSS simples que você pode aprender em 10 minutos

Quer saber mais sobre como usar CSS? Experimente estes exemplos básicos de código CSS para começar e, em seguida, aplique-os às suas próprias páginas da web.

Leia a seguir

Sobre o autor