Avec les feuilles de style CSS3, il est tout à fait possible de créer des ombrages sur le texte ou les images d'une page en utilisant les propriétés de box-shadow, text-shadow et border-color.

Pour cela nous utilisons box-shadow. Les préfixes -moz et -webkit sont à utiliser pour les versions moins récentes de Firefox, Chrome ou Safari.

Il faut définir plusieurs valeurs:

• Le décalage horizontal de l'ombre, une valeur positive signifie que l'ombre sera sur la droite de la boîte, alors qu'une valeur négative placera l'ombre sur la gauche.
• Le décalage vertical de l'ombre, une valeur positive signifie que l'ombre sera en dessous de la boîte, alors qu'une valeur négative placera l'ombre au dessus.
• Le rayon de flou ou force du dégradé (blur) (en option), une valeur 0 définie une ombre nette, alors qu'un nombre plus grand augmentera le flou.
• Le rayon étalé (facultatif), des valeurs positives augmentera la taille de l'ombre, alors que négatives la diminuera. Le défaut est 0, c'est-à-dire que l'ombre a la même taille que le flou.
• La couleur, de l'ombre.

Ombre externe

Exemple:

.shadow     { -moz-box-shadow:7px 7px 7px #333; 
              -webkit-box-shadow:7px 7px 7px #333; 
	      box-shadow:7px 7px 7px #333; }

Ombre interne

Pour cela il faut rajouter la valeur inset
Exemple:

.shadow     { -moz-box-shadow:inset 0 0 10px #000000; 
              -webkit-box-shadow:inset 0 0 10px #000000; 
	      box-shadow:inset 0 0 10px #000000; }

Quelques exemples

Sur une image:

img    { -moz-box-shadow:8px 8px 12px #000; 
         -webkit-box-shadow:8px 8px 12px #000; 
	 box-shadow:8px 8px 12px #000; }

Avec une bordure blanche:

img    { -moz-box-shadow:8px 8px 12px #000; 
         -webkit-box-shadow:8px 8px 12px #000; 
	 box-shadow:8px 8px 12px #000;
         border: 2px solid #fff; }

Le cas d'Internet Explorer

Le filtre shadow

évidemment,Internet Explorer, jusqu'à la version IE8 incluse, ne reconnaît pas la propriété box-shadow.
Il existe un filtre propriétaire Microsoft permettant d'obtenir un résultat similaire.
Il suffit d'appliquer ce filtre à l'élément en indiquant une couleur, une direction (en degrés) et l'intensité du dégradé.

img { filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', 
      Direction=135, Strength=12); zoom:1; }

Il est possible d'appliquer ce filtre uniquement sur Internet Explorer à l'aide d'un commentaire conditionnel.

<style type="text/css">   
img { border: 5px solid #fff;
      -moz-box-shadow: 8px 8px 12px #aaa; 
      -webkit-box-shadow: 8px 8px 12px #aaa; 
      box-shadow: 8px 8px 12px #555; } 
</style>
    
<!--[if lte IE 8]>
 <style type="text/css">
 img { filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', 
       Direction=135, Strength=12); zoom: 1; } 
 </style>
<![endif]-->

CSS3 PIE

Plutôt que d'utiliser le filtre shadow, il existe une autre solution, CSS3 PIE qui a pour but de rendre quelques styles CSS3 compatibles avec les versions 6, 7, 8 et 9 d'Internet Explorer.

Pour cela, il faut utiliser la propriété behavior dans les feuille de style, et un fichier *.htc. Les composants HTC contiennent du code Javascript spécifiquement utilisé par Internet Explorer.
Ce code Javascript simule les styles CSS 3 non pris en charge.

Exemple d'utilisation:

.ombrage { -moz-box-shadow: #000 3px 3px 5px;
           -webkit-box-shadow: #000 3px 3px 5px;
           box-shadow: #000 3px 3px 5px;
           behavior: url(/PIE.htc); }

Dans url(), il faut, bien sûr, indiquer le chemin où se trouve le fichier PIE.htc.

Vous pouvez récupérer ce fichier sur CSS3pie.com

Les styles pris en charge sont:

• Coins arrondis
• Ombres portées des boîtes
• Image de bordure
• Plusieurs images d'arrière-plan
• Dégradé linéaire sous forme d'image de fond

Ombrage de texte

.ombrage { text-shadow:0px 0px 9px #000; color:#fff; } 

.ombrage { text-shadow:0 0 4px white, 
           0 -5px 4px #FFFF33, 
           2px -10px 6px #FFDD33, 
           -2px -15px 11px #FF8800, 
           2px -25px 18px #FF2200; color: #000; }