Box-shadow pour tous navigateurs

La propriété box-shadow de CSS 3 est supportée par les versions récentes de Chrome et Firefox ainsi que par Internet Explorer 9.
Mais pour les versions antérieures de Internet Explorer, il faut trouver des artifices de substitution. En fait quelques lignes de code suffiront.

Le code CSS

La propriété box-shadow est implémentée sous des noms différents selon les navigateurs.

-moz-box-shadow: 6px 6px 12px #888;  
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;

Le premier paramètre est le décalage horizontal de l'ombre.

Le second paramètre est le décalage vertical.

On peut mettre des valeurs négatives pour placer l'ombre du coté opposé de la boite.

La troisième valeur, toujours positive, est la longueur du dégradé.

Une quatrième valeur, non utilisée dans la démo, étend l'ombre dans la direction opposée.

Un code de couleur donne la coloration de cette ombre.

Le paramètre inset, non utilisé dans la démo, crée une ombre à l'intérieur de la boite et non à l'extérieur comme ici.

Le code complet

Pour donner un cadre à l'image, ou créer une marge interne dans le cas d'une boite de texte, on ajoute la propriété padding:

padding: 8px;

Et on ajoute un bord pour délimiter la boite avec la propriété border classique:

border: 1px solid #CCC; 

On peut éventuellement arrondir les angles:

border-radius:6px;  
-moz-border-radius:6px;

Ceci ne marchera pas avec Internet Explorer, la boite restera carrée.

Voir le code entier dans le source de la démonstration.

Le code propre à Internet Explorer 6

Ce code est inutile sur Internet Explorer 8, mais permet la compatibilité avec IE6 et IE 7.

Il s'agit d'un filtre ActiveX. En fait, selon la documentation de Microsoft, ce filtre est supporté depuis IE 5.5.
La Direction 135 signifie en bas à droite. Il y a un code pour chaque coté de la boite.
La propriété zoom sert à résoudre une bogue d'affichage.

<!--[if lte IE 8]> 
<style type="text/css">
.shaded
{
background-color: #fff;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=6);
}
</style>
<![endif]-->

Il faut aussi ce DOCTYPE pour toutes les versions de Internet Explorer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ou:

<!DOCTYPE HTML>

Test de compatibilité

Les règles qui fonctionnent sur le navigateur courant affichent un carré vert avec une ombre, sinon un simple carré vert.

  box-shadow -webkit-box-shadow -moz-box-shadow
normal
 
 
 
inset
 
 
 

La propriété inset utilise la syntaxe:

box-shadow:inset 6px 6px 12px #0F0;

Avec Internet Explorer 9 la propriété box-shadow (sans inset) ne fonctionne pas dans une table, elle fonctionne autrement comme ci-dessous:

 

Démonstrations sur une boite de texte et une image

Démonstration d'une boite de texte ou d'une image avec une ombre, en CSS 3, fonctionnant sur tous les navigateurs.

Exemple de boite de texte:

Ceci est une boite de texte, un simple paragraphe avec la balise <p>, et la propriété box-shadow en feuille de style.
Elle fonctionne avec les navigateurs les plus récents.

Le code CSS 3 de base:

.shaded
{
padding: 8px;
border: 1px solid #CCC;
box-shadow:8px 8px 12px #888;
border-radius:6px;
}

Le code HTML:

<p class="shaded" style="width:400px;">
... contenu...
</p>

Code HTML pour une image, l'exemple en début de page:

<img class="shaded" src="/images/bulle.jpg" />   

Références

© 2010-2012 Xul.fr