Como criar uma sombra projetada com CSS

Embora as tendências de design variem a cada ano, você pode contar com o uso de efeitos de sombra básicos, como Sombra da caixa e sombra contribuir positivamente para a estética de um site. Você pode usar sombras projetadas para criar efeitos agradáveis ​​e belamente renderizados sem parecerem cafonas.

Vamos dar uma olhada mais de perto no CSS sombra propriedade.

O que é sombra projetada CSS?

sombra projetada () é um efeito CSS que exibe uma sombra em torno da forma de um objeto especificado. Esta é a sintaxe para aplicar um CSS sombra.

Sintaxe:
filtro: sombra (cor offset-x offset-y raio de desfoque);

Existe uma grande variedade de funções de filtro Incluindo desfocar (), brilho( ), e sombra projetada ().

offset-x determina a distância horizontal e offset-y determina a distância vertical. Observe que os valores negativos colocam a sombra à esquerda (offset-x) e acima (offset-y) o objeto.

Os dois últimos parâmetros são opcionais. Você pode especificar o raio de desfoque da sombra como um comprimento. Por padrão, é definido como 0. Você não pode ter um raio de desfoque negativo.

A cor da sombra é especificada como. Se você não especificou uma cor, ela segue o valor do cor propriedade.

Quando o CSS drop-shadow é útil?

Você já deve saber disso Sombra da caixa faz o trabalho muito bem. Então, você pode pensar, por que precisamos sombra em absoluto? Existem numerosos casos em que o sombra projetada () função é um salva-vidas. Vamos dar uma olhada em alguns deles:

Formas não retangulares

Ao contrário de um Sombra da caixa, você pode adicionar um sombra para formas não retangulares. Por exemplo, temos um SVG ou PNG transparente com uma forma não retangular - uma estrela, por exemplo. Aqui, a adição de uma sombra que corresponde ao próprio objeto pode ser concluída com qualquer Sombra da caixa ou sombra. Considere os dois cenários:

HTML

CSS

.star-img img {
display: bloco embutido;
altura: 15em;
largura: 25em;
}
.Sombra da caixa {
cor vermelha;
sombra da caixa: 0,60em 0,60em 0,2em;
}
.drop-shadow {
filtro: sombra (0,60em 0,60em 0,2em);
}

Saída:

Ao comparar os dois efeitos, é evidente que um Sombra da caixa dá uma sombra retangular; também não importa se a imagem é transparente ou já possui um fundo. Por outro lado, sombra permite que você crie uma sombra que se adapte ao formato da própria imagem.

Os fatores limitantes são que o sombra projetada () função aceita todos os parâmetros do tipo exceto o inserir palavra-chave e espalhar parâmetro.

Elementos Agrupados

Existem vários casos em que você pode precisar construir componentes sobrepondo certos elementos. Se você está usando Sombra da caixa, você enfrentará o problema de tentar projetar uma sombra da maneira certa. Veja como funciona ao agrupar uma imagem e um componente de texto:

HTML

Viva o momento

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi e a labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

CSS básico

corpo {
preenchimento: 5em 1em;
família de fontes: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genebra, Verdana, sans-serif;
}
h2 {
tamanho da fonte: 2rem;
}
p {
tamanho da fonte: 0.8rem;
}
.parent-container {
display: flex;
direção flexível: coluna;
altura: 17 rem;
largura: 50em;
}
.image-container img {
largura: 15em;
posição: absoluta;
índice z: 1;
topo: 2em;
esquerda: 1,5em;
}
.text-container {
cor: rgb (255, 236, 236);
cor de fundo: rgb (141 0 35);
largura: 30rem;
preenchimento: 3rem;
alinhar-se: flex-end;
posição: relativa;
}

Agora, aplique o Sombra da caixa e sombra para ver a diferença.

.drop-shadow {
filtro: sombra (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0,5));
}
.caixa,
.box img {
sombra da caixa: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0,3);
}

Saída:

Como você pode ver, o Sombra da caixa é aplicado em cada elemento individualmente enquanto o sombra agrupa ambos e aplica a sombra.

Elementos Cortados

Você pode usar o caminho de corte propriedade para cortar uma determinada região que determina quais partes de uma imagem ou elemento devem ser mostradas. o filtro de sombra nos permite criar um sombra no elemento recortado aplicando-o ao pai desse elemento:

HTML

CSS

.parent-container {
filtro: sombra (0rem 0rem 1.5rem marrom);
}
.clipped-element {
largura: 50em;
altura: 50em;
margem: 0 automático;
imagem de fundo: url (sorrindo-menina.jpg);
trajeto do clipe: círculo (50%);
tamanho do fundo: capa;
repetição de fundo: sem repetição;
}

Saída:

Recortamos 50% da imagem com um caminho circular. Portanto, o filtro de sombra é aplicado apenas à parte visível da imagem. Não é incrível?

Limitações e diferenças

Como discutimos acima, sombra não suporta o espalhar parâmetro. Isso significa que criar um efeito de contorno não seria possível usando o sombra projetada () função porque ele é morto em todos os lugares. Além disso, ele renderiza diferentes efeitos de sombra do Sombra da caixa e sombra de texto (com os mesmos parâmetros). Você pode sentir que as diferenças entre os Sombra da caixa e sombra ferver até o CSS Box Model. Um segue enquanto o outro não. Aqui está um exemplo:

HTML

Cada artigo do MUO o levará um passo mais perto.


Cada artigo do MUO o levará um passo mais perto.



Cada artigo do MUO o levará um passo mais perto.

CSS básico

corpo {
preenchimento: 5em 1em;
família de fontes: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genebra, Verdana, sans-serif;
}
.parent-container {
largura: 72rem;
}
p {
tamanho da fonte: 3em;
estilo da fonte: negrito;
}

Aplicando efeitos de sombra

.drop-shadow {
filtro: sombra (0,5em 0,5em 0,1em # 555);
}
.Sombra da caixa {
sombra da caixa: 0,5em 0,5em 0,1em # 555;
}
.text-shadow {
sombra do texto: 0,5em 0,5em 0,1em # 555;
}

Saída:

Você pode ver que o Sombra da caixa dá uma sombra mais pesada e escura do que o sombra de texto e sombra. Além disso, há uma ligeira diferença no posicionamento da sombra entre os sombra de texto e sombra. No entanto, você pode preferir diferentes efeitos de sombra de acordo com seus requisitos.

Suporte de navegador

o sombra projetada () A função é compatível com todos os navegadores modernos, exceto navegadores mais antigos, como o Internet Explorer. Embora não seja algo que atrapalhe seriamente a UX, você pode adicionar uma consulta de recurso com um Sombra da caixa cair pra trás.

Experimente com diferentes efeitos de sombra

A popularidade de Sombra da caixa é bastante óbvio devido à grande variedade de casos de uso. No entanto, o sombra projetada () função é altamente subutilizada. Esperamos que você experimente diferentes efeitos de sombra e tente implementar sombra em seus projetos futuros.

As pseudo-classes adicionam uma gama inteiramente nova de funcionalidades ao CSS e ao seu repertório de desenvolvimento web pessoal. Saiba mais sobre eles para se tornar um desenvolvedor web mais proficiente e eficiente.

Como usar CSS box-shadow: 13 truques e exemplos

Caixas sem graça parecem chatas. Enfeite-os com o efeito de sombra de caixa CSS!

Leia a seguir

Sobre o autor