Ajouter une ombre à vos images en css

Voici 2 méthode pour ajouter une ombre a vos images.

CSS et Image, le couple beauté

Il faut tous d'abord créer une image qui représentera notre ombre.
Nous allons la créer au format png ET gif, car IE ne gère pas la transparence du format png.

Pour que votre ombre soit correcte dans tous les cas de figures, il faut créer une image plus grande que la plus grande des images de votre site.
Par exemple, si votre image la plus grande fait 800*600 pixels, et que vous voulez une ombre porté de 6 pixels, vous devez créer une image vide de 806*606 pixels.

Ne vous inquiétez pas de la taille de l'image de l'ombre, malgré ces dimension elle s'appliquera au plus petite image sans souci (comme on dit, qui peu le plus, peu le moins)

Dans ce nouveau fichier vide, créer votre ombre portée.
Ci-dessous, celle que nous utiliserons pour l'exemple. La porté de notre ombre est de 6px :

Vous remarquerez que la couleur de fond n'a pas d'importance car elle est couverte par votre image.

Voici le css qui permettra d'appliquer l'ombre à l'image:

css

.img-shadow {
  float:left;
  /* La première ligne permet d'utiliser l'ombre au format png pour la plupart*/
  /* des navigateur. La seconde utilisera le format gif pour IE. */
  background: url(shadowAlpha.png) no-repeat bottom right !important;
  background: url(shadow.gif) no-repeat bottom right;
  }
.img-shadow img {
  display: block;
  position: relative;
  border: 1px solid #a9a9a9;
  /* Cette ligne permet de placer correctement notre image par rapport à notre*/       
/*ombre.  Les valeur sont choisi en conséquence de l'étendue de l'ombre. */
  margin: -6px 6px 6px -6px;
  }

Maintenant le code html.
Sur le principe, on affiche l'image dans une div. Cette div a pour fond l'ombre. Les marge donné a l'image donne un effet de décalage par rapport a la DIV.

html4strict

<div class="img-shadow">
  <img src="img.jpg" alt="test"/>
</div>

Le CSS appliqué à la 1ère DIV contient un float:left, ce qui va faire que les éléments HTML qui suivront votre image serons sur la même ligne que celle ci. Pour annuler ceci et réutilisez les alignements par défaut, rajoutez <div style=“clear:left”></div> à la fin du code HTML ci-dessus.

Voici le résultat :

CSS solo, moins beau ? plus light !

Cette méthode n'est pas bien compliquée.
On défini 2 DIV, toutes avec une couleur de fond différente (mais proche).
Pour l'exemple nous utiliserons du dégradé de gris mais vous pouvez faire vos ombre de la couleur que vous le voulez.
La 1ère DIV contient la 2ème et la 2ème DIV contient notre image : En HTML cela donne ça :

html4strict

<div class="flou">
<div class="ombre">
<img class="contenu" src="img.jpg" alt="test"/>
</div>
</div>

Le CSS appliqué à la 1ère DIV contient un float:left, ce qui va faire que les éléments HTML qui suivront votre image serons sur la même ligne que celle ci. Pour annuler ceci et réutilisez les alignements par défaut, rajoutez <div style=“clear:left”></div> à la fin du code HTML ci-dessus.

Ici nous “ombrons” une image mais à la place de l'image vous pouvez mettre une 3eme DIV avec un border ce qui aura pour effet de créer un bloc de texte ombré.

Évidement, sans CSS, ça ne donne pas grand chose, voici donc le CSS :

css

.flou{
	background-color: #ccc; /*couleur de l'ombre */
	margin-left: 4px;
	margin-top: 4px;
	float:left;
}
 
.ombre,
.contenu {
	position: relative;
	bottom: 2px;
	right: 2px;
}
 
.ombre{
	background-color: #666; /*2ème couleur de l'ombre*/
}
 
.contenu {
	border: 1px solid #000; /*bordure de l'image*/
}