Si vous n'avez jamais observé des effets d'ombres réalisée en CSS3, c'est que simplement votre navigateur ne les supporte pas encore.  Pour moi la première fois c'etait l'ombre d'un texte, lors d'une sélection à la souris, qui avait attirée mon attention.

Voici un petit tour d'horizon de deux déclarations qui vont vous permettre d'ajouter une ombre à un block ou à un texte.

Les ombres en CSS3

Une ombre derrière un élément block

Pour réaliser une ombre sur un élément de type block (<p>,<div>,<table>...) nous pouvons utiliser la class suivante pour laquelle nous spécifions pour chaque type de navigateur la règle précédée du préfixe correspondant suivie par une couleur et 4 longueurs ou seulement 3 pour le webkit :

<style type="text/css">

.shadow {

  box-shadow: #999 3px 3px 4px 1px;

  /* Mozilla/Firefox/Gecko */
  -moz-box-shadow: #999 3px 3px 4px 1px;

  /* Webkit (Safari/Chrome) */
  -webkit-box-shadow: #999 3px 3px 4px;
}

</style>

La couleur de l'ombre est spécifiée par sa valeur héxadécimale #999 ainsi que son décalage sur l'axe horizontal (offset-xhorizontal), son décalage sur l'axe vertical (offset-yl), le rayon du flou (blur-radius) qui proportionnellement augmente l'étalement de l'ombre, et le rayon d'étendue si elle est supportée par le navigateur.

 Voir la démo | See demo

Une ombre derrière un texte

Pour un élément de type text, nous utiliserons la déclaration suivante :

<style type="text/css">

.text-shadow {

  text-shadow: #666 2px 2px 2px;
}

</style> 

La couleur de l'ombre est là aussi spécifiée par sa valeur héxadécimale #666 suivie du décalage sur l'axe horizontal (offset-x), puis vertical (offset-y) et enfin du rayon du flou (blur-radius).

 Voir la démo | See demo