CSS está cheio de opções para melhorar a aparência de seus sites; sombras de texto e caixa são exemplos principais. Eles oferecem resultados semelhantes às sombras encontradas em softwares de edição de imagens como o Photoshop.

Mas como funcionam as sombras CSS? Vamos mergulhar de cabeça.

Como usar CSS Box Shadow

Você pode aplicar uma sombra de caixa CSS com uma única linha de CSS contendo um intervalo de até seis valores. A ordem dos valores é crucial para o funcionamento da sombra da sua caixa CSS, e fica assim:

box-shadow: offset-x offset-y blur spread color inset;

Vamos dar uma olhada em cada um dos valores em ordem.

Posição da Sombra da Caixa CSS

Os valores offset-x e offset-y controlam a posição da sombra da sua caixa. O valor offset-x representa a posição horizontal da sombra, enquanto offset-y é o deslocamento vertical.

 box-shadow: 10px 10px;

Valores positivos resultam em uma sombra abaixo e à direita do elemento.

Você também pode usar valores negativos para h-offset e v-offset:

 box-shadow: -10px -10px;
instagram viewer

Um h-offset negativo move a sombra para a esquerda, enquanto um v-offset negativo a move para cima:

CSS Box Shadow Blur

Como você pode ver, adicionar o deslocamento h e o deslocamento v à sua sombra cria uma sombra sólida sem qualquer enevoamento. O valor de desfoque desfoca a sombra da caixa CSS e entra em vigor se você fornecer um terceiro valor:

box-shadow: 10px 10px 20px;

Quanto maior o número que você adicionar ao valor do desfoque, mais desfocada será a sombra da sua caixa CSS. Este valor não pode ser negativo.

Propagação de Sombra da Caixa CSS

O valor de dispersão permite que você altere o tamanho de sua sombra sem alterar sua posição.

 box-shadow: 10px 10px 20px 30px;

Um valor de dispersão positivo aumentará a sombra da caixa CSS, enquanto um valor negativo a diminuirá.

Cor da Sombra da Caixa CSS

As sombras da caixa CSS são padronizadas com a cor do texto do elemento, mas você pode substituir isso adicionando uma cor:

Sombra da caixa: 10px 10px 20px 10px #0000ff;

A cor que você usa deve estar em um formato de cor legal CSS, como um código hexadecimal, código RGB ou cor predefinida. Você pode aprender sobre códigos hexadecimais e outras opções de cores CSS legais antes de começar com suas sombras.

CSS Box Shadow Inset

As sombras da caixa CSS assumem o padrão de cair fora de seu elemento atribuído. Ao adicionar uma inserção à propriedade box-shadow, você pode exibir a sombra na parte interna do elemento.

Sombra da caixa: 10px 10px 20px 10px #0000ff inserção;

Este é um valor de texto predefinido; basta adicioná-lo ou removê-lo para definir o valor.

Como usar a sombra de texto CSS

As sombras de texto CSS são como sombras de caixa, embora tenham menos valores para modificar. A sintaxe para uma sombra de texto CSS é semelhante a esta:

text-shadow: offset-x offset-y blur-radius color;

Mas como funcionam esses valores?

Posição da Sombra do Texto CSS

Os deslocamentos de sombra de texto CSS funcionam de maneira muito semelhante aos mesmos valores de sombra de caixa:

sombra de texto: 10px 10px;

Valores positivos posicionarão a sombra abaixo e à direita do texto.

Valores negativos fazem o oposto, colocando a sombra acima e à esquerda do texto.

 sombra de texto: -10px -10px;

Você pode misturar valores negativos e positivos para posicionar sua sombra de texto CSS perfeitamente.

Raio de desfoque de sombra de texto CSS

O raio de desfoque da sombra do texto CSS permite que você desfoque a sombra atrás do seu texto.

sombra de texto: 10px 10px 10px;

O padrão para esse valor é 0 (sem desfoque).

Cor da Sombra do Texto CSS

Por padrão, as sombras do texto CSS correspondem à cor do texto. Você pode alterar a cor do seu texto adicionando-o ao final da propriedade CSS text shadow.

texto-sombra: 10px 10px 10px #0000ff;

Como as cores de sombra da caixa CSS, você deve usar uma cor legal CSS para isso.

Caixa CSS e exemplos de design de sombra de texto

Você pode começar a experimentar o uso de caixa CSS e sombras de texto depois de entender o básico. As ideias abaixo devem inspirá-lo a criar suas próprias formas criativas de usar essas propriedades CSS.

Bordas de duas cores com duas sombras de caixa CSS

Você pode adicionar mais de uma sombra de caixa ou sombra de texto a um elemento HTML. Desde que tenham vírgulas entre eles, você pode adicionar novas sombras a uma única propriedade.

Sombra da caixa: 30px 30px#0000ff, -30px-30px 0px#00ff00;

Esta borda de duas cores é um bom exemplo disso. Duas sombras de caixa CSS com posições opostas e sem desfoque/espalhamento produzem uma excelente borda criativa.

Sombras duplas de texto CSS para efeito dramático

De maneira semelhante à ideia acima, você pode adicionar e posicionar várias sombras de texto para obter resultados interessantes.

text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray;

Este exemplo mostra uma linha de texto com uma sombra acima e uma sombra abaixo, ambas com valores de cor baseados em texto.

Planos de fundo multicoloridos com sombras de caixa CSS inseridas

O CSS é poderoso o suficiente para criar recursos exclusivos e interessantes sem nenhum arquivo externo. Usar uma sombra de caixa CSS inserida como plano de fundo é um ótimo exemplo disso.

Sombra da caixa: 20px 10px 10px 40px #000000 inserção, -50px -30px 8px 60px inserção cinza, 30px 20px 6px 90px inserção cinza claro;

Esta caixa tem um fundo branco, juntamente com três sombras inseridas em cores diferentes. As sombras se sobrepõem para criar um fundo único.

Aumentar ainda mais esse efeito é uma simples questão de adicionando um elegante gradiente de fundo CSS ao seu elemento.

Sombras de caixa CSS e sombras de texto para Web Design criativo

A caixa CSS e as sombras de texto são fáceis de usar quando você sabe como trabalhar com elas. Agora você tem as ferramentas necessárias para começar a trabalhar em seus próprios designs, mas deve continuar pesquisando CSS para melhorar suas habilidades.