En-tete Astuces divers html et css
Classic Moderne

Les ombrages sur Div, Image et autre:

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'image décorative et de découpes intempestives.

Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. Sans oublier la couleur, bien-entendu. La propriété s'applique sur la boîte de l'élément, et non sur sa bordure. L'ombrage n'affecte pas la taille de la boîte de l'élément.

La première valeur indique le décalage horizontal vers la droite (ici 8px)
le deuxième correspond au décalage vertical vers le bas (ici 8px)
le chiffre suivant indique la force du dégradé (ici 0px)
et enfin, la couleur (ici #aaa)

Syntaxe de box-shadow

box-shadow: h-pos v-pos (blur) (spread) (color) (inset);

h-pos Position horizontale de l’ombre.
v-pos Position verticale de l’ombre.
blur Distance du flou,
spread Taille de l’ombre.


Compatibilité et utilisation concrète:
Seuls les navigateurs modernes, reconnaissent la propriété box-shadow.
La propriété doit être préfixée sur des versions antérieures par -moz- pour Firefox 4, ou -webkit- pour Chrome 10, Safari 5.1 et Android ainsi que Safari Mobile 5.0, pour fonctionner sur les premières versions de ces navigateurs à avoir accepté les ombrages, ce qui devient donc -moz-box-shadow et -webkit-box-shadow.

Voici une illustration d'ombre portée dégradée

EXEMPLE:

capture_de_jeux




img
{
box-shadow: 8px 8px 12px black;
}



Et voici enfin une variante sous forme de "halo" dégradé

EXEMPLE:

capture_de_jeux




img
{
box-shadow: 1px 1px 12px #555;
}



Adaptation pour Internet Explorer 8 et antérieure.


Le filtre Shadow

Internet Explorer, 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 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;
}










Haut-de-Page