Ombres photoréalistes en CSS avec Drop-Shadow

Introduction

Récemment, nous avons relevé le défi de créer des ombres photoréalistes pour le nouveau projet que nous réalisons avec Little Thai. Après des recherches approfondies, nous avons constaté qu’il n’y avait pas beaucoup d’informations disponibles. Nous avons décidé de développer notre propre technique en utilisant la commande drop-shadow en CSS, et les résultats ont été spectaculaires. Aujourd'hui, nous souhaitons partager avec la communauté comment nous y sommes parvenus, afin que chacun puisse bénéficier de cette avancée.

Les exigences pour cette partie du développement étaient claires ; nous avions besoin d'ombres photoréalistes pour les produits du magasin Little Thai. Pourquoi? L’idée était de créer une vitrine numérique afin que les utilisateurs puissent acheter les produits proposés par cette entreprise. L'idée de la proposition était de montrer les produits avec une vue de dessus, comme s'ils étaient placés sur une table. Pour le rendre plus réaliste, nous avions besoin que ces ingrédients aient des ombres photoréalistes. À ce stade, il y avait deux options. D'une part, cela pourrait être fait avec Photoshop. Cette vidéo explique comment procéder de cette façon. D'un autre côté, cela pourrait être fait avec CSS en utilisant la nouvelle commande drop-shadow.

C'était un défi car, comme nous l'avons mentionné, il n'y avait pas d'informations sur la façon de créer des ombres réalistes dans Photoshop. Cependant, cela nous a évité d'éditer les dizaines de produits de la boutique dans Photoshop et, de plus, de ne pas avoir à éditer à chaque fois qu'un nouveau produit était ajouté. Comment ça s’est passé alors ?

La technique

La commande drop-shadow en CSS est un outil puissant pour ajouter des ombres aux éléments graphiques. Cependant, son utilisation n’est pas toujours simple lorsqu’on recherche un effet photoréaliste. Notre solution est basée sur l'application de plusieurs ombres avec différents paramètres pour obtenir un effet plus profond et plus réaliste.

Code CSS utilisé

Voici le code CSS que nous avons utilisé pour créer les ombres photoréalistes :

filtre : ombre portée(17px 17px 13px rgba(0, 0, 0, 0.3)) ombre portée(7px 7px 4.5px rgba(0, 0, 0, 0.3));

Explication du code

Première ombre portée : 17px 17px 13px rgba(0, 0, 0, 0.3) : Cette ombre est la plus grande et la plus diffuse. Les paramètres indiquent une ombre déplacée de 17px aussi bien sur les axes X que Y, avec un flou de 13px et une opacité de 30%.

Deuxième ombre portée : 7px 7px 4.5px rgba(0, 0, 0, 0.3) : Cette ombre est plus petite et moins diffuse que la première. Les paramètres indiquent une ombre déplacée de 7px aussi bien sur les axes X que Y, avec un flou de 4,5px et une opacité de 30%.

La combinaison de ces deux ombres crée une sensation de profondeur et de réalisme difficile à obtenir avec une seule ombre.

Exemple visuel Voici un exemple visuel de l'apparence du résultat final en utilisant notre technique d'ombre photoréaliste :

Il est important de souligner deux points :

— L'ombre fonctionne mieux sur un ton gris doux plutôt que sur un blanc pur.

— Dans ce cas, les ombres sont conçues pour la perspective de dessus. Sous d'autres angles photographiques, cela ne fonctionnera pas bien.

Applications pratiques

Cette technique peut être utilisée dans une variété de contextes, depuis les images de produits dans les boutiques en ligne jusqu'aux éléments graphiques sur les sites Web d'entreprise. La possibilité de créer des ombres réalistes peut améliorer considérablement l'apparence visuelle et la qualité perçue d'un projet.

Générateur d'ombres photoréalistes en ligne en CSS

Vous pouvez trouver le générateur en ligne sur le site Web MandarinaWebs

Conclusion

Nous sommes très heureux de partager cette technique avec la communauté des développeurs et des designers. Nous pensons qu'il peut s'avérer un outil précieux pour tout professionnel cherchant à améliorer l'esthétique de ses projets Web. Nous serions ravis d’entendre vos commentaires et de voir comment vous appliquez cette technique dans votre propre travail.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!