75
Utilisation des effets d’arrière‑plan
Figure 4.15
Une boîte à bords
arrondis créée avec
la propriété borderimage.
Ombres portées
Les.ombres.portées.sont.des.artifices.visuels.populaires.et.attrayants..Elles.donnent.de.la.
profondeur.et.rehaussent.l’apparence.des.pages.trop.plates..La.plupart.des.utilisateurs.se.
servent.de.logiciels.comme.Photoshop.pour.les.ajouter.directement.aux.images..Mais.avec.
les.CSS,.il.est.possible.d’appliquer.des.effets.simples.d’ombre.portée.sans.altérer.les.images.
d’origine.
Plusieurs.raisons.peuvent.pousser.à.procéder.de.cette.manière,.par.exemple,.pour.que.des.
utilisateurs.qui.ne.savent.pas.retoucher.des.images.puissent.administrer.votre.site.web.ou.
qu’ils.puissent.le.faire.depuis.un.lieu.où.ils.n’ont.pas.accès.à.Photoshop,.comme.un.cyber.
café..À l’aide. d’un. style. d’ombre. portée. prédéfini,. vous. pourrez. télécharger. de. simples.
images.et.les.afficher.sur.le.site.avec.une.ombre.portée.
L’un.des.plus.intéressants.avantages.liés.à.l’utilisation.des.CSS.tient.à.ce.que.cette.technique.
ne.dénature.pas.les.images..Si.vous.décidez.de.supprimer.l’effet.d’ombre.portée.par.la.suite,.
vous.n’aurez.que.deux.lignes.à.modifier.dans.vos.fichiers.CSS.au.lieu.de.retraiter.la.totalité.
des.images..
Ombres portées simples en CSS
Cette. méthode. très. simple. a. été. décrite. la. première. fois. par. Dunstan. Orchard.
(www.1976design.com)..Elle.consiste.à.appliquer.une.grande.image.d’ombre.portée.à.l’arrière-plan.d’une.div.conteneur..L’ombre.portée.est.ensuite.révélée.par.décalage.de.l’image.
à.l’aide.de.marges.négatives.
La.première.chose.à.faire.est.de.créer.l’image.de.l’ombre.portée..C’est.ce.que.j’ai.fait.avec.
male.de.l’image..J’ai,.pour.ma.part,.créé.un.fichier.de.800 pixels.sur.800 pixels,.par.précaution..Déverrouillez.le.calque.d’arrière-plan.et.remplissez-le.avec.la.couleur.sur.laquelle.vous.
souhaitez.projeter.l’ombre.portée..Pour.cet.exemple,.j’ai.conservé.l’arrière-plan.en.blanc..
Créez.un.nouveau.calque.et.remplissez-le.en.blanc..Ensuite,.décalez.ce.calque.vers.le.haut.
Utilisation des effets d’arrière‑plan
Figure 4.15
Une boîte à bords
arrondis créée avec
la propriété borderimage.
Ombres portées
Les.ombres.portées.sont.des.artifices.visuels.populaires.et.attrayants..Elles.donnent.de.la.
profondeur.et.rehaussent.l’apparence.des.pages.trop.plates..La.plupart.des.utilisateurs.se.
servent.de.logiciels.comme.Photoshop.pour.les.ajouter.directement.aux.images..Mais.avec.
les.CSS,.il.est.possible.d’appliquer.des.effets.simples.d’ombre.portée.sans.altérer.les.images.
d’origine.
Plusieurs.raisons.peuvent.pousser.à.procéder.de.cette.manière,.par.exemple,.pour.que.des.
utilisateurs.qui.ne.savent.pas.retoucher.des.images.puissent.administrer.votre.site.web.ou.
qu’ils.puissent.le.faire.depuis.un.lieu.où.ils.n’ont.pas.accès.à.Photoshop,.comme.un.cyber.
café..À l’aide. d’un. style. d’ombre. portée. prédéfini,. vous. pourrez. télécharger. de. simples.
images.et.les.afficher.sur.le.site.avec.une.ombre.portée.
L’un.des.plus.intéressants.avantages.liés.à.l’utilisation.des.CSS.tient.à.ce.que.cette.technique.
ne.dénature.pas.les.images..Si.vous.décidez.de.supprimer.l’effet.d’ombre.portée.par.la.suite,.
vous.n’aurez.que.deux.lignes.à.modifier.dans.vos.fichiers.CSS.au.lieu.de.retraiter.la.totalité.
des.images..
Ombres portées simples en CSS
Cette. méthode. très. simple. a. été. décrite. la. première. fois. par. Dunstan. Orchard.
(www.1976design.com)..Elle.consiste.à.appliquer.une.grande.image.d’ombre.portée.à.l’arrière-plan.d’une.div.conteneur..L’ombre.portée.est.ensuite.révélée.par.décalage.de.l’image.
à.l’aide.de.marges.négatives.
La.première.chose.à.faire.est.de.créer.l’image.de.l’ombre.portée..C’est.ce.que.j’ai.fait.avec.
male.de.l’image..J’ai,.pour.ma.part,.créé.un.fichier.de.800 pixels.sur.800 pixels,.par.précaution..Déverrouillez.le.calque.d’arrière-plan.et.remplissez-le.avec.la.couleur.sur.laquelle.vous.
souhaitez.projeter.l’ombre.portée..Pour.cet.exemple,.j’ai.conservé.l’arrière-plan.en.blanc..
Créez.un.nouveau.calque.et.remplissez-le.en.blanc..Ensuite,.décalez.ce.calque.vers.le.haut.