Styles d'ombrages & navigateurs

Donnez du styles à vos sites Web ! Maîtrisez la propriété Box-shadow, text-shadow et dompter les ombrages dans les différents navigateurs.

Box-shadow

Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d’images.

La propriété CSS box-shadow a été incluse dans le module « borders » de CSS3 et permet ainsi de générer une ombre portée sur n’importe quel élément HTML.

Cette propriété permet d’utiliser différentes valeurs tel que le décalage vertical et horizontal, la couleur et l’intensité du dégradé. Cette propriété s’applique sur la boîte de l’élément, et non sur sa bordure et n’affecte pas la taille de la boîte de l’élément.

Syntaxe et propriétés

 La première valeur indique le décalage horizontal vers la droite, ici à titre d’exemple, 5px,

 la deuxième correspond au décalage vertical vers le bas, ici 5px,

 la troisième indique la force du dégradé, ici 15px,

 la dernière, la couleur (ici #666)

box-shadow: 5px 5px 15px #666;

Ils est indispensables d’utiliser des préfixes que voici pour la compatibilité dans les différents navigateurs :

-moz- pour Firefox depuis la version 3.1+
-webkit- pour Safari, Chrome
-o- pour Opera depuis la version 10.6

 moz-box-shadow:5px 5px 15px #666;

 webkit-box-shadow:5px 5px 15px #666;

 o-box-shadow:5px 5px 15px #666;

Dans la feuille de style CSS nous noterons donc :

Compatibilité dans les navigateurs

A noté que certains navigateurs ne reconnaissent pas encore les différentes propriétés box-shadow et nécessitent des adaptations personnalisées.

IE et le filtre Shadow

Internet Explorer (IE), jusqu’à la version IE8 incluse, ne reconnaît pas la propriété box-shadow.

Cependant, tout comme pour la transparence de couleur, il existe un filtre propriétaire,le filtre filtre Shadow ; son utilisation est simple, il suffit d’appliquer ce filtre à l’élément en indiquant une couleur, une direction en degrés et l’intensité du dégradé souhaité.

Ce filtre fonctionne également sur Chrome, Safari à partir de la v.4 et Firefox à partir de la v.3.

img
filter:progid:DXImageTransform.Microsoft.Shadow(color=’#666′, Direction=120, Strength=15);
zoom: 1;

Pour appliquer ce filtre à Internet Explorer utiliser un commentaire conditionnel.

Commentaire conditionnel pour IE :

Text-shadow

La propriété text-shadow permet de produire une ombre portée sur le texte de contenu sur lequel elle est appliquée.

Il est possible de spécifier les décalages de l’ombrage, sa couleur et sa zone de flou.

h1
text-shadow: 0px 0px 5px #666;
color: #fff;

Compatibilité et syntaxe

Contrairement à la propriété box-shadow, celle-ci n’est pas reconnue par Internet Explorer (version 8 comprise). Par contre, Opera 9.5+ l’implémente correctement.

Notez également que puisqu’il s’agit d’une propriété finalisée, il n’y a pas lieu de lui affecter un préfixe -moz-, -webkit-, …. elle demeure text-shadow quelque soit le navigateur.

Adaptation pour Internet Explorer

Le résultat sur Internet Explorer est malheureusement plus dégradé que sur les autres navigateurs mais il y parait tout de même.

Dans la feuille de style CSS :

.ombrage
text-shadow: 5px 5px 5px #666;

Commentaire conditionnel pour IE :

Une mise en forme avancé

Associées aux coins arrondis et aux transparences de couleurs, les propriétés d’ombrage sont très puissantes et permettent une mise en forme avancée sans images !