Notre objectif est de créer un système qui mettra en place, sur vos images, le cadre et l'ombre sans modifier l'image originale. Nous n'utiliserons ici que du CSS et une image.

Le principe

Il est possible d'afficher une image dans un bloque. On peut donc très facilement appliquer à ce bloque une marge interne (padding) de plusieurs pixels. Ceci créer une première bordure de la couleur de fond de notre bloque. Nous pouvons alors exploiter la propriété CSS border pour ajouter une seconde bordure d'un pixel de large et grise par exemple. Il ne nous manquera alors plus que l'ombre.

Impossible en CSS de générer une ombre. C'est pourquoi nous allons simplement utiliser une image en PNG. C'est le seul format adapté au web qui gère très bien la couche alpha (transparence). Cette image nous fournira une ombre à droite et en bas (à adapter pour des ombres orientés différemment). Finalement, on essaiera simplement de fusionner deux images.

Une image quelconque :

Image de test

Et l'image qui nous fournit l'ombre :

Ombre

Mise en œuvre

Pour que les images puissent se superposer, l'une d'entre elles doit être placée en arrière plan d'un bloque. Nous exploiterons l'arrière plan du bloque de l'image (pour obtenir une bordure blanche). Nous devrons donc placer autour de l'image un autre bloque chargé de contenir l'ombre. Nous utiliserons alors le code html suivant :

<p><span class="shadowImage"><img src="montagnes.png" alt="montagnes" /></span></p>

Le span encadrant l'image n'a pas d'autre but que de créer le second bloque dont nous aurons besoin pour placer l'image générant l'ombre en arrière plan. Dans notre fichier CSS, on utilisera le code suivant :

.shadowImage
{
  /* On met notre span en bloque */
  display:block;
 
  /* On lui applique un float left, il sort ainsi du flux standard
  et n'occupera pas toute la largeur disponible comme il l'aurait
  fait normalement */
  float:left;
 
  /* On place notre ombre en arrière plan en bas à droite */
  background: url('images/shadowAlpha-mini.png') no-repeat bottom right;
 
  /* Quelques marges pour le style... */
  margin: 10px 0 0 10px;
}
 
.shadowImage img
{
  /* On fixe notre image en format bloque */
  display: block;
 
  /* On définit sa position à relative pour plus de liberté */
  position: relative;
 
  /* Son fond est blanc pour obtenir une bordure de cette couleur*/
  background-color: #fff;
 
  /* Une autre bordure */
  border: 1px solid #a9a9a9;
 
  /* Les marges positives servent à aficher les ombres,
     les marges négative sortent l'image de son coteneur */
  margin: -6px 6px 6px -6px;
 
  /* Marge interne pour la bordure blanche */
  padding: 4px;
 
}

Notez qu'il faudra utiliser une image assez grande pour produire une ombre sur des images de plus grande taille. Vous pouvez maintenant admirer le résultat.

Conclusion

Le seul problème que pose vraiment la méthode utilisée, c'est qu'il est impératif d'ajouter un conteneur supplémentaire à l'image. L'article dont je me suis inspiré pour ma rédaction proposait de l'encadrer d'un div. Je pense que pour respecter la valeur sémantique des éléments de la page, il est préférable d'utiliser le span. D'autre part, si vous utilisez cet effet sur une image encadrée par un lien, vous pouvez utiliser ce lien comme conteneur supplémentaire.

Sources

Cet article est inspiré d'un article sur alistapart.com. Si l'anglais ne vous pose pas de problème, je vous invite à le lire pour plus de détails sur la méthode utilisée.

Je profite de l'occasion pour signaler l'existence du site freemages.fr qui propose des tonnes d'images sous Licence Art Libre. C'est de là que vient la photo de montagnes utilisée en exemple dans cet article.