Dans le monde du webdesign et de la création de sites internet avec Webflow, les détails peuvent faire toute la différence. Aujourd'hui, nous allons aborder une question qui peut sembler simple de prime abord, mais qui requiert une attention particulière : est-il possible d'ajouter une ombre directement à une image PNG détourée dans Webflow ? La réponse est oui, et je vais vous montrer comment.

Comprendre le Défi

Avant de plonger dans le vif du sujet, il est important de comprendre pourquoi cette tâche est particulière. Lorsque vous travaillez avec une image PNG détourée, vous voulez que l'ombre suive les contours précis de l'image, et non pas la boîte englobante de l'élément image.

Méthode Conventionnelle et ses Limites

La première approche qui peut venir à l'esprit est d'utiliser la fonction "Box Shadow" dans le panneau de style de Webflow. Cependant, comme vous le constaterez rapidement, cette méthode applique l'ombre à l'élément HTML de l'image, et non à l'image détourée elle-même.

La Solution : Custom Code et CSS

La solution réside dans l'utilisation d'un code CSS personnalisé. Voici les étapes pour y parvenir :

Étape 1 : Ajouter un Élément Embed

Dans la hiérarchie de votre page, ajoutez un élément "Embed" que vous trouverez dans la section "Advanced" des éléments disponibles.

Étape 2 : Écrire le Code CSS

Éditez l'élément "Embed" et ajoutez les balises <style> pour commencer à écrire votre CSS. Utilisez la propriété CSS filter: drop-shadow() pour créer l'ombre. Par exemple :

cssCopy code

<style>
 .shadow-image {
   filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.3));
 }
</style>

Ici, .shadow-image est la classe appliquée à votre image PNG. Les valeurs numériques représentent respectivement le décalage horizontal, le décalage vertical, le flou, et la dernière valeur est la couleur de l'ombre avec son opacité.

Étape 3 : Appliquer la Classe à Votre Image

Assurez-vous que la classe .shadow-image (ou le nom que vous avez choisi) est appliquée à votre image PNG dans le panneau de style.

Personnalisation et Ajustements

Une fois que vous avez appliqué l'ombre, vous pouvez facilement ajuster les valeurs pour obtenir l'effet désiré. Vous pouvez également utiliser des outils comme Chat GPT pour trouver rapidement des codes de couleurs spécifiques en RGBA.

Aller Plus Loin avec Webflow : La Formation CORIACE 💪

Si vous souhaitez approfondir vos connaissances et compétences sur Webflow, je vous invite à découvrir CORIACE 💪, notre plateforme dédiée à l'apprentissage de Webflow et du no-code. Avec des programmes variés, de l'assistance projet et même la possibilité de demander des leçons personnalisées, CORIACE 💪 est la plateforme idéale pour maîtriser Webflow de A à Z.

Conclusion

Ajouter une ombre à une image PNG détourée dans Webflow est non seulement possible, mais également simple une fois que vous connaissez la méthode. N'hésitez pas à expérimenter avec les valeurs et les couleurs pour créer des ombres parfaitement adaptées à vos designs. Et si vous voulez aller encore plus loin, rejoignez-nous sur Corias pour une expérience d'apprentissage complète et personnalisée.

À très bientôt pour une nouvelle aventure Webflow ! Ciao !