Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2010/07/20

Ombrer ses Boîtes avec box-shadow

Ombrer ses Boîtes avec box-shadow

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


Créer une ombre portée pour ses boîtes avec box-shadow

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 :



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

Opacité - Orange 100% et 20%


Le résultat obtenu sur la photo d'origine :

Filtre sépia


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:progid:DXImageTransform.Microsoft.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 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 :

Ombre portée - Château de Vufflens


Note : L'affichage de cette page avec Internet Explorer ou FireFox fait apparaître une légère différence.


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 pour visualiser les différences :


Effet d'halo - 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, et une valeur de padding positive fait apparaître un cadre coloré.

Cadre coloré - Château de Vufflens


Le CSS, compatible IE et FF :


background-color: #c00;
padding: 3px;



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.

En utilisant un Gadget Google, cette technique permet de rapidement insérer une photo avec un cadre semi-transparent :





L'utilisation de box-shadow dans le modèle Filigrane

Le code utilisé par Blogger pour le modèle Filigrane (Watermark)est le suivant 


border: solid 1px #c00;
padding: 5px;
background-color: #fff;
-moz-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(204, 0, 0, .5);



Ce code produit une légère ombre portée, dont le rayon de flou est de 5px. Le décalage est de 1px. L'opacité de 50%. Le padding de 5px crée un cadre blanc (background-color: #fff;) autour de l'image. Pour afficher une ombre portée avec Internet Explorer il faut ajouter un filtre alpha comme ceci 


filter:progid:DXImageTransform.Microsoft.Shadow(color='#cc0000', Direction=120, Strength=3);



L'image obtenue :

Ombre portée - modèle Filigrane



En savoir plus

Un Gadget Google pour afficher une photo avec un cadre semi-transparent

Opacité et transparence, animer ses images

Opacité et transparence, appliquer un filtre

Encadrer ses photos avec du CSS

Des cadres pour ses photos avec du CSS en ligne sous Google Sites

Des cadres pour ses photos sur Blogger


© Photos : Diapo.ch, Clos Domaines et Châteaux et Les Liens du Vin

Enregistrer un commentaire


Rechercher sur le Blog de Prac avec Google CSE