Comment Créer une Ombre Portée Pour une Image PNG

Les ombres donnent toujours une apparence nouvelle à une image et la rendent attirante.

La propriété CSS box-shadow permet d'ajouter des ombres sur les images, mais nous ne pouvons pas l'utiliser avec les images png car l’effet mettra toujours une ombre d’image carrée.

Par conséquent, si vous souhaitez créer une ombre portée pour l'image png, le meilleur choix est la propriété filter.

La propriété filter contient de nombreuses valeurs qui peuvent vous aider à résoudre de nombreux problèmes de style.

Comment Appliquer une Ombre Portée à l'Image PNG.

  • Placez la source de l'image dans la section body.
  • Indiquez la largeur de l'image dans la section Style.
  • Définissez la propriété filter sur la valeur drop-shadow.

Il existe quatre valeurs: <offset-x> spécifie la distance horizontale. <offset-y> spécifie la distance verticale. Nous définissons la <offset-x> et la <offset-y> à 5px. Le suivant est <blur-radius> qui applique plus de flou sur l'image.

La valeur suivante agrandit et grossit l'ombre. Nous l'avons mis 10px. La quatrième valeur est la couleur. Les noms de couleur, les codes de couleur hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Vous pouvez sélectionner les couleurs à partir de notre outil Pipette de Couleur.

Notez que la propriété filter est utilisée avec l'extension -webkit-. Comment créer une ombre portée pour une image PNG

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        width: 250px;
        -webkit-filter: drop-shadow(5px 5px 5px #666666);
        filter: drop-shadow(5px 5px 5px #666666);
      }
    </style>
  </head>
  <body>
    <h2>Ombre portée sur une image PNG</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="w3docs logo" />
  </body>
</html>

Il est possible d'utiliser le filtre en CSS ou en ligne:

<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="w3docs logo" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #666666);">

Nous avons déjà parlé de la différence entre la propriété box-shadow et le mot-clé drop-shadow, expliquons-le maintenant dans l'exemple suivant :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        width: 200px;
      }
      .box-shadow {
        float: left;
        box-shadow: 7px 7px 7px #666666;
      }
      .drop-shadow {
        float: right;
      }
      .drop-shadow img {
        filter: drop-shadow(7px 7px 7px #666666);
        -webkit-filter: drop-shadow(7px 7px 7px #666666);
      }
    </style>
  </head>
  <body>
    <h2>Différence entre box-shadow et drop-shadow</h2>
    <div class="images">
      <div class="box-shadow">
        <p>
          Box-shadow
          <img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" />
        </p>
      </div>
      <div class="drop-shadow">
        <p>
          Drop-shadow
          <img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" />
        </p>
      </div>
    </div>
  </body>
</html>

Comme vous le voyez dans l'exemple, nous utilisons la même image png, mais nous plaçons box-shadow dans le premier cas et drop-shadow dans le second.