box-shadow ou filter: drop-shadow?

Duas escolhas, um único efeito. Saiba quando usar o estilo certo na hora certa.

Imagem de capa

Ta aí uma dúvida legal de responder.

Essa semana estive fazendo um trabalho como freelancer onde a ideia era desenvolver um componente totalmente personalizado. Eis que o componente em questão era esse aqui:

Imagem do componente

Como você pode ver, não é trivial. Nunca tinha feito um componente com tantas características singulares como esse, mas como eu não sou de abandonar um bom desafio, lá fui eu.

Primeira questão: por onde começar?

A voz da experiência logo me falou “comece pelo mais difícil”.

E a voz da diversão sem limites disse “comece pelo mais legal”.

E aí, na minha audácia e espírito de rebeldia falei “e se eu fizesse os dois?” 😎

Ok, talvez eu não tenha falado isso em voz alta.

Então escolhi a aba em formato de seta.

Foi um elemento bastante interessante de fazer, o mais desafiador, sem dúvida, foi fazer o lado esquerdo num formato irregular, o lado direito também num formato irregular e o conteúdo da seta com largura flexível.

Eu normalmente faria isso usando imagens, mas dessa vez inovei, e usei SVG para poder deixar essa faixa colorida na lateral dinâmica, assim não tenho que fazer uma imagem nova sempre que quiser mudar de cor.

Como fiz isso vou deixar para outro post, mas o que eu quero focar nesse aqui é só num desses problemas: a sombra.

Imagine que temos um componente onde dois lados tem um formato totalmente não-quadrado, e no centro tem um <div> que se ajusta com o conteúdo.

Imagem de um elemento irregular

A nossa sombra tem que ficar fluída, e contornando todo o componente de acordo com seu formato, certo?

Beleza, pra fazer uma sombra, o CSS oferece dois atributos nos quais podemos fazer esse efeito, são eles o box-shadow e o filter: drop-shadow.

Vamos ver na prática a diferença.

Se aplicarmos a esse elemento o box-shadow, teremos o seguinte resultado:

Resultado com o box-shadow

Porém, se aplicarmos ao mesmo elemento o filter: drop-shadow, temos esse resultado:

Resultado com o drop-shadow

A diferença é clara, o filtro drop-shadow é capaz de perceber o formato da imagem que está sendo renderizada para aplicar a sombra, e isso também é válido se ao invés de uma imagem com fundo transparente, tivermos um SVG.

See the Pen box-shadow vs filter: drop-shadow by Thiago Rossener (@thiagorossener) on CodePen.

Vantagens e desvantagens

Você provavelmente deve estar pensando:

Demorou! Vou usar o drop-shadow SEMPRE!

Acontece que infelizmente nem tudo é leite ninho com Nutella nessa vida.

O box-shadow é suportado por mais navegadores que o filter: drop-shadow, e principalmente por quais? Exatamente, navegadores da Microsoft.

Dá uma olhada no suporte desses caras:

Suporte para box-shadow Clique aqui para ver mais detalhes

Suporte para drop-shadow Clique aqui para ver mais detalhes

Conclusão

Os dois estilos matam a pau o problema das sombras, mas se encaixam em diferentes situações.

Para um caso onde a sombra é trivial, o box-shadow resolve o problema, mesmo porque ele tem outras vantagens como a possibilidade de criar sombras internas, e aplicar mais de uma sombra ao mesmo elemento.

Porém, se você precisa que a sombra seja aplicada a elementos com formatos diferentões é muito mais negócio ficar com o drop-shadow, que possibilita o mesmo efeito para esses casos.

Espero que esse artigo curtinho tenha deixado mais claro em quais situações é melhor usar cada um deles.

Ficou com alguma dúvida? Tem alguma crítica? Pode mandar aqui nos comentários que ficarei feliz em respondê-las. ✌️

Não importa o quão devagar você vá, desde que você não pare.

Confúcio