Ombrer ses Boîtes avec box-shadow

Ombrer ses boîtes avec box-shadow
ARTICLE EN COURS DE REDACTION
Les nouveaux modèles de Blogger utilisent la propriété CSS3 box-shadow. Celle-ci permet de créer des effets d'ombrage et de dégradé pour les boîtes html.
L'élément de style box-shadow
La propriété CSS box-shadow fait partie de la norme CSS3. Elle permet d'ajouter une ombre portée sur un élément HTML (span, div, img, ...).
La propriété s'applique sur la boîte de l'élément et non sur sa bordure. Blogger utilise cette propriété avec les nouveaux modèles.
En regardant la source du modèle Filigrane (Watermark) de Josh Peterson nous trouvons ce code CSS :
.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img
{
padding: 5px;
background-color: #fff;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
La propriété box-shadow n'est pas encore implémentée par l'ensemble des navigateurs (juillet 2010). Il faut donc utiliser un préfixe CSS pour qu'un navigateur spécifique la reconnaisse.
-moz-box-shadow : Mozilla (FireFox)
-webkit-box-shadow : Webkit (Safari et Chrome)
-goog-ms-box-shadow : Chrome sous Internet Explorer (?)
Internet Explorer (IE), version 8 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 s'agit du filtre Shadow dont nous verrons l'utilisation plus loin.
La syntaxe de box-shadow
box-shadow: décalage-horizontal décalage-vertical dégradé taille couleur inset;
décalage-horizontal : obligatoire
décalage-vertical : obligatoire
dégradé : facultatif,par défaut 0. Une valeur positive augmente le flou de l'ombre. On parle de rayon de flou pour cette propriété (blur)
taille : facultatif. Par défaut 0, ce qui donne une ombre à la même taille que l'élément ombré. Une valeur positive augmente l'ombre, une valeur négative la diminue
couleur : facultatif
inset : facultatif. Si inset est mentionné il s'applique à toutes les couleurs utilisées comme fond
La couleur
La couleur peut-être indiquée selon un code couleur #rrggbb ou en notation rgb(r,g,b). Nouveauté de CSS3, la notation rgba (a pour filtre alpha) permet d'indiquer un degré d'opacité entre 0 et 1. L'opacité (la transparence d'une couleur) est définie par la propriété CSS opacity. Si opacity s'applique à un élément html et à tous ses descendants, la notation rgba ne s'applique elle qu'à une seule propriété de l'élément sélectionné.
Principe de la notation rgba
La notation rgba est identique à la notation rgb(r,g,b) mais comporte un dernier paramètre qui indique l'opacité de la couleur. L'opacité se défini par un nombre compris entre 0 et 1. A titre d'exemple, appliquons un filtre orange (#ff4500 rgb(255,69,0)), à cette photo en noir et blanc :

Le travail de l'Homme
Nous voulons une opacité de 20% (autrement dit 20% d'opacité correspond à 80% de transparence).

opacité 100% opacité 20%

Le résultat obtenu sur la photo d'origine :
Le travail de l'Homme
Le CSS utilisé pour le filtre
background-color: rgba(255,69,0,.2);
/* fond orangé : #ff4500 rgb(255,69,0) */
/* opacité : 20% (.2) */
Le filtre spécifique à Internet Explorer
La notation rgba n'est pas reconnue par IE. Il faut donc utiliser un filtre alpha spécifique, suivi de la couleur de fond en notation rgb. Ces 2 éléments sont à placer avant la définition rgba :
filter:alpha(opacity=20); /* filtre IE */
background-color: rgb(255,69,0); /* couleur de fond pour IE; FF et Chrome vont appliquer rgba */
background-color: rgba(255,69,0,.2);
Ce qui nous donne le code complet suivant :
<div style="background-image: url(http://www.liens-du-vin.ch/_pic06/vigneron-manoir.jpg); width: 240px; height: 207px; margin: auto;">
<div style="width: 240px; height: 207px; filter:alpha(opacity=20); background-color: rgb(255,69,0); background-color: rgba(255,69,0,.2); ">
</div>
</div>
Une ombre portée légérement floue
Créons une ombre portée décalée de 10px, avec un flou de 3px. L'ombre possède la même taille que l'élément ombré. Le CSS utilisé :
box-shadow: 10px 10px 3px #044eff; /* ombre de couleur bleu #044eff = rgb(4,78,255) */
-moz-box-shadow: 10px 10px 3px rgba(4,78,255, .8); /* opacité 80% */
-webkit-box-shadow: 10px 10px 3px rgba(4,78,255, .8);
-goog-ms-box-shadow: 10px 10px 3px rgba(4,78,255, .8);
ce qui donne l'image suivante :

Château de Vufflens
Simuler l'ombre portée sous IE
IE ne supportant pas box-shadow, il faut utiliser un filtre alpha. Le CSS pour Internet Explorer :
filter:progid:DXImageTransform.Microsoft.Shadow(color='#044eff', Direction=120, Strength=10);
Un effet d'halo
Créons une ombre portée centrée sur l'élément ombré. Donnons à l'ombre un rayon de flou important (12px) et agrandissons l'ombre de 5px. Le CSS utilisé :
{
box-shadow: 0 0 12px 5px #c00; /* pas de décalage de l ombre */
-moz-box-shadow: 0 0 12px 5px #c00; /* rayon de flou : 12px */
-webkit-box-shadow: 0 0 12px 5px #c00; /* l'ombre dépasse de 5px de l'objet ombré */
-goog-ms-box-shadow: 0 0 12px 5px #c00;
}
Le résultat, qu'il faut afficher sous FF et IE :

Château de Vufflens

L effet d'halo sous Internet Explorer
L'image ci-dessus ne possède pas d'halo sous Internet Explorer. Pour l'afficher, la solution retenue est la même que celle utilisé dans Blogger pour les nouveaux modèles. Un fond de couleur est défini pour l'élément, est une valeur de padding positive fait apparaître un cadre coloré.

Château de Vufflens

On peut aussi utiliser la technique du cadre semi-transparent. Mais, contrairement à l'emploi de box-shadow, le cadre semi-transparent empiète sur l'image.