Applying Drop Shadow to Irregularly Shaped PNG Images Using CSS

The standard approach to applying a drop shadow to a PNG image using -o-box-shadow, -icab-box-shadow, -khtml-box-shadow, -moz-box-shadow, -Webkit-Box-Shadow ou Box-Shadow Properties traite l'image comme un carré. Cela peut entraîner l'ombre qui ne se conforme pas à la forme réelle de l'image.

pour appliquer une ombre de drop qui suit avec précision les contours d'une image PNG non carré, vous pouvez utiliser la propriété CSS Filter: DropShadow (). Cette syntaxe de propriété est la suivante:

filter: drop-shadow(x y blur? color?);

ici, x et y représentent respectivement les décalages horizontaux et verticaux de l'ombre, tandis que le flou définit le flou des bords de l'ombre. Le paramètre de couleur facultatif définit la couleur de l'ombre.

Cette technique peut être appliquée à l'aide de règles CSS régulières:

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

Alternativement, vous pouvez spécifier le filtre en ligne pour les images individuelles:

en utilisant la propriété Filter: DropShadow (), vous pouvez réaliser des shadows de drop précis sur vos conceptions de png de façon irrégulière.