Maintenant. que. vous. êtes. armé. sur. le. plan. théorique,. passons. à. la. pratique.. Le.Web. est.
aujourd’hui.un.média.particulièrement.axé.sur.l’expression.visuelle..La.petite.balise.d’image.
(au.départ,.simple.moyen.d’ajouter.du.contenu.visuel.aux.sites.web).a.permis.aux.concepteurs.web.de.transformer.d’ennuyeux.documents.en.véritables.expériences.graphiques..Les.
graphistes.s’en.sont.rapidement.emparés.pour.embellir.la.présentation.des.pages..En.fait,.
sans.l’invention.de.la.balise.d’image,.la.profession.de.concepteur.web.n’aurait.sans.doute.
jamais.évolué.
Malheureusement,. cette. balise. a. trop. souvent. servi. à. encombrer. les. pages. d’images. uniquement.destinées.à.la.présentation..Mais.les.CSS.permettent.heureusement.d’afficher.des.
images. sans. les. intégrer. dans. le. balisage,. comme. arrière-plan. d’un. élément. existant..Au.
travers.d’une.série.d’exemples.pratiques,.vous.allez.voir.ici.comment.les.images.d’arrièreplan.peuvent.être.utilisées.pour.créer.une.variété.de.techniques.intéressantes.et.pratiques.
Au.cours.de.ce.chapitre,.vous.en.apprendrez.plus.sur :
•. les.boîtes.à.bords.arrondis.à.largeur.fixe.et.flexible ;
•. la.technique.des.portes.coulissantes ;
•. les.images.multiples.d’arrière-plan.et.la.propriété.border-radius ;
•. les.ombres.portées.CSS ;
•. les.propriétés.opacity.et.RGBa ;
•. l’affichage.des.PNG.dans.les.anciennes.versions.d’Internet.Explorer ;
•. le.défilement.parallaxe ;
•. le.remplacement.d’image.
Notions de base sur les images d’arrière-plan
Rien.de.plus.simple.que.d’appliquer.une.image.d’arrière-plan..Par.exemple,.si.vous.souhaitez.un.bel.arrière-plan.mosaïqué.pour.votre.site,.vous.pouvez.appliquer.l’image.comme.
arrière-plan.à.l’élément.body :
body {
background-image:url(/img/pattern.gif);
}
Le. comportement. par. défaut. du. navigateur. consiste. à. répéter. l’image. horizontalement. et.
verticalement.afin.qu’elle.remplisse.toute.la.page.par.un.effet.de.mosaïque..Pour.un.contrôle.
plus.précis,.vous.pouvez.choisir.si.l’image.d’arrière-plan.doit.se.répéter.verticalement,.horizontalement.ou.pas.du.tout..
Utilisation des effets
d’arrière-plan
4
aujourd’hui.un.média.particulièrement.axé.sur.l’expression.visuelle..La.petite.balise.d’image.
(au.départ,.simple.moyen.d’ajouter.du.contenu.visuel.aux.sites.web).a.permis.aux.concepteurs.web.de.transformer.d’ennuyeux.documents.en.véritables.expériences.graphiques..Les.
graphistes.s’en.sont.rapidement.emparés.pour.embellir.la.présentation.des.pages..En.fait,.
sans.l’invention.de.la.balise.d’image,.la.profession.de.concepteur.web.n’aurait.sans.doute.
jamais.évolué.
Malheureusement,. cette. balise. a. trop. souvent. servi. à. encombrer. les. pages. d’images. uniquement.destinées.à.la.présentation..Mais.les.CSS.permettent.heureusement.d’afficher.des.
images. sans. les. intégrer. dans. le. balisage,. comme. arrière-plan. d’un. élément. existant..Au.
travers.d’une.série.d’exemples.pratiques,.vous.allez.voir.ici.comment.les.images.d’arrièreplan.peuvent.être.utilisées.pour.créer.une.variété.de.techniques.intéressantes.et.pratiques.
Au.cours.de.ce.chapitre,.vous.en.apprendrez.plus.sur :
•. les.boîtes.à.bords.arrondis.à.largeur.fixe.et.flexible ;
•. la.technique.des.portes.coulissantes ;
•. les.images.multiples.d’arrière-plan.et.la.propriété.border-radius ;
•. les.ombres.portées.CSS ;
•. les.propriétés.opacity.et.RGBa ;
•. l’affichage.des.PNG.dans.les.anciennes.versions.d’Internet.Explorer ;
•. le.défilement.parallaxe ;
•. le.remplacement.d’image.
Notions de base sur les images d’arrière-plan
Rien.de.plus.simple.que.d’appliquer.une.image.d’arrière-plan..Par.exemple,.si.vous.souhaitez.un.bel.arrière-plan.mosaïqué.pour.votre.site,.vous.pouvez.appliquer.l’image.comme.
arrière-plan.à.l’élément.body :
body {
background-image:url(/img/pattern.gif);
}
Le. comportement. par. défaut. du. navigateur. consiste. à. répéter. l’image. horizontalement. et.
verticalement.afin.qu’elle.remplisse.toute.la.page.par.un.effet.de.mosaïque..Pour.un.contrôle.
plus.précis,.vous.pouvez.choisir.si.l’image.d’arrière-plan.doit.se.répéter.verticalement,.horizontalement.ou.pas.du.tout..
Utilisation des effets
d’arrière-plan
4