Box-shadow pour tous navigateurs
La propriété box-shadow de CSS 3 est supportée par les versions récentes de tous les navigateurs.
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.
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;Exemple:
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
- Référence: Box-shadow, spec W3C.
- Les codes de Direction pour Internet Explorer.