Introdução

Recentemente, enfrentamos o desafio de criar sombras fotorrealistas para o novo projeto que estamos fazendo com Little Thai. Após extensa pesquisa, descobrimos que não havia muita informação disponível. Decidimos desenvolver nossa própria técnica usando o comando drop-shadow em CSS e os resultados foram espetaculares. Hoje queremos compartilhar com a comunidade como conseguimos isso, para que todos possam se beneficiar desse avanço.

Os requisitos para esta parte do desenvolvimento eram claros; precisávamos de sombras fotorrealistas para os produtos da loja Little Thai. Por que? A ideia era criar uma vitrine digital para que os usuários pudessem comprar os produtos que a empresa oferece. A ideia da proposta era mostrar os produtos com perspectiva de cima, como se estivessem colocados sobre uma mesa. Para torná-lo mais realista, precisávamos que esses ingredientes tivessem sombras fotorrealistas. Neste ponto, havia duas opções. Por um lado, isso poderia ser feito com o Photoshop. Este vídeo explica como fazer dessa forma. Por outro lado, isso poderia ser feito com CSS usando o novo comando drop-shadow.

Isso foi um desafio porque, como mencionamos, não havia informações sobre como fazer sombras realistas no Photoshop. Porém, isso nos poupou de editar as dezenas de produtos da loja no Photoshop e, além disso, de não ter que editar cada vez que um novo produto era adicionado. Como foi feito então?

A tecnica

O comando drop-shadow em CSS é uma ferramenta poderosa para adicionar sombras a elementos gráficos. Porém, seu uso nem sempre é simples quando se busca um efeito fotorrealista. Nossa solução é baseada na aplicação de múltiplas sombras com diferentes parâmetros para obter um efeito mais profundo e realista.

Código CSS usado

Aqui está o código CSS que usamos para criar as sombras fotorrealistas:

filtro: sombra projetada(17px 17px 13px rgba(0, 0, 0, 0,3)) sombra projetada(7px 7px 4,5px rgba(0, 0, 0, 0,3));

Explicação do código

Primeira sombra projetada: 17px 17px 13px rgba(0, 0, 0, 0.3): Esta sombra é a maior e mais difusa. Os parâmetros indicam uma sombra deslocada de 17px nos eixos X e Y, com desfoque de 13px e opacidade de 30%.

Segunda sombra projetada: 7px 7px 4,5px rgba(0, 0, 0, 0.3): Esta sombra é menor e menos difusa que a primeira. Os parâmetros indicam uma sombra deslocada de 7px nos eixos X e Y, com desfoque de 4,5px e opacidade de 30%.

A combinação dessas duas sombras cria uma sensação de profundidade e realismo que é difícil de alcançar com uma única sombra.

Exemplo visual Aqui está um exemplo visual de como fica o resultado final usando nossa técnica de sombra fotorrealista:

É importante destacar dois pontos:

— A sombra funciona melhor em um tom cinza suave em vez de branco puro.

— Neste caso, as sombras são projetadas para a perspectiva de visão superior. Em outros ângulos fotográficos, não funcionará bem.

Aplicações práticas

Essa técnica pode ser usada em diversos contextos, desde imagens de produtos em lojas online até elementos gráficos em sites corporativos. A capacidade de criar sombras realistas pode melhorar significativamente a aparência visual e a qualidade percebida de um projeto.

Gerador de sombras fotorrealistas online em CSS

Você pode encontrar o gerador online no site MandarinaWebs

Conclusão

Estamos muito entusiasmados em compartilhar essa técnica com a comunidade de desenvolvedores e designers. Acreditamos que pode ser uma ferramenta valiosa para qualquer profissional que busca aprimorar a estética de seus projetos web. Adoraríamos ouvir seus comentários e ver como você aplica essa técnica em seu próprio trabalho.