docExrtait du chapitre 5
download 
Plainte Transcription
Exrtait du chapitre 5
5
Effets
Pouvoir modifier les couleurs et les polices est certes déjà intéressant, mais, c’est bien connu, on
en veut toujours plus ; on recherche de l’éclat, du panache, du clinquant. Il est probablement
quelque peu exagéré de réunir tout cela dans une rubrique “effets”, mais le sujet de ce chapitre
est si vaste qu’il est difficile de faire autrement. Vous allez voir comment obtenir des angles
arrondis, faire ressortir des boîtes, simuler des filtres de distorsion, faire coulisser des images
dans des onglets, créer un effet de parallaxe, etc.
Complexspiral
Il s’agit là d’un vieux succès, en toute modestie évidemment. À l’époque où je l’ai créé, en 2001,
cet effet était appelé démonstration “complexspiral”. Même si sa principale utilisation a été
depuis éclipsée par les images PNG avec transparence et les couleurs RVBa, il recèle encore
quelques points intéressants.
Pour le mettre en œuvre, vous avez besoin d’au moins deux images d’arrière-plan (voir
Figure 5.1).
Ensuite, affectez l’une d’elles à l’arrière-plan de l’élément body, l’autre à l’arrière-plan d’un élément div dans lequel est placé le contenu de la page (voir Figure 5.2). Voici les styles CSS et un
squelette HTML :
body {background: white url(shell.jpg) top left no-repeat fixed;}
div#main {background: white url(shell-rippled.jpg) top left no-repeat fixed;}
<body>
<div id="main">
(...contenu...)
</div>
</body>
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 141
01/06/2011 14:12:07
142
CSS – Techniques professionnelles pour une mise en page moderne
Figure 5.1 : Les deux images utilisées.
Figure 5.2 : Le résultat final.
Le secret réside dans le mot clé fixed. Dans les deux règles, il permet de positionner les images
d’arrière-plan de sorte que leur angle supérieur gauche corresponde à l’angle supérieur gauche
de la zone d’affichage (dans ce cas, la fenêtre du navigateur), sans qu’elles puissent en bouger,
même lors du défilement du document. Elles se trouvent donc toujours l’une par-dessus l’autre.
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 142
01/06/2011 14:12:08
Effets
Chapitre 5 143
Pour comprendre ce que cela signifie, examinons un exemple plus simple dans lequel deux
images d’arrière-plan de taille différente sont positionnées de manière fixe dans l’angle supérieur gauche de la fenêtre d’affichage (voir Figure 5.3).
html, body {background: transparent top left no-repeat fixed;}
html {background-image: url(red-box.gif);}
body {background-image: url(green-box.gif);}
Figure 5.3 : Deux images en position fixe dans la fenêtre d’affichage.
Vous remarquerez que les images restent dans l’angle supérieur gauche de la fenêtre même dans
le cas d’un défilement jusqu’à environ la moitié de la page. Elles sont fixes (fixed) par rapport à
la fenêtre d’affichage. En aucun cas elles ne bougent.
Pour la démonstration complexspiral, nous prenons deux images de taille identique que nous
alignons parfaitement. Nous les positionnons afin que l’une chevauche l’autre là où son élément
existe et coïncide avec l’emplacement de l’image. C’est pourquoi la coquille floue est visible dans
le div principal, alors que l’image nette de la coquille est visible dans l’arrière-plan de l’élément
body qui l’entoure. L’image d’arrière-plan du div n’est pas aligné avec son angle supérieur
gauche, mais avec celui de la fenêtre d’affichage. Vous ne voyez que l’intersection avec le div luimême (voir Figure 5.4).
Supposons à présent que vous souhaitiez créer un troisième effet de distorsion pour les titres du
contenu. Il suffit d’impliquer une autre image (voir Figure 5.5).
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 143
01/06/2011 14:12:08
144
CSS – Techniques professionnelles pour une mise en page moderne
Figure 5.4 : L’effet de flou sur la coquille suit le défilement.
Figure 5.5 : Ajouter une troisième image.
En l’ajoutant aux titres à l’aide de la règle suivante, nous obtenons l’effet illustré à la Figure 5.6 :
div#main h2 {background: url(shell-traced.jpg) top left no-repeat fixed;}
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 144
01/06/2011 14:12:09
Effets
Chapitre 5 145
Figure 5.6 : Ajouter une troisième image pour les titres.
L’effet ne se limite pas à des images d’arrière-plan non répétées. Vous pouvez facilement constituer des couches superposées de motifs répétés (voir Figure 5.7) ; peut-être pas ces motifs précis,
mais vous comprenez l’idée.
Figure 5.7 : Répéter des motifs.
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 145
01/06/2011 14:12:10
146
CSS – Techniques professionnelles pour une mise en page moderne
La démonstration complexspiral d’origine se fondait sur une même image déclinée dans des
teintes dégradées pour obtenir un effet d’arrière-plan semi-transparent. En 2001, cette solution
représentait l’état de l’art : très peu de navigateurs prenaient en charge le format PNG avec
couche alpha et aucun n’était capable de traiter les couleurs avec canal alpha comme le format
RVBa. Depuis, en raison de l’adoption complète du format PNG, cette solution est obsolète (la
page correspondante existe toujours, à l’adresse http://meyerweb.com/eric/css/edge/complexspiral/demo.html).
En revanche, la solution “déformée” décrite dans cette section reste d’actualité. Il s’agit simplement d’une autre manière d’arriver au même effet.
Fenêtres pop-up en CSS
Si vous faites preuve d’imagination, voici un effet qui vous mènera aux menus contextuels (pour
les détails, voir la section suivante). Dans le cadre d’une utilisation simple, vous pouvez l’employer pour faire apparaître et disparaître des informations lorsque le pointeur de la souris entre
et sort d’un élément, tout cela sans écrire une seule ligne de code JavaScript.
Supposons que vous souhaitiez afficher un petit texte explicatif pour chaque lien placé dans une
barre latérale, mais que vous ne vouliez pas employer les info-bulles car leur présentation est
incohérente entre les navigateurs et leur aspect ne peut pas (encore) être modifié. Le balisage de
base est comparable au suivant :
<ul class="toc">
<li>
<a href="1.html">Chapitre 1 <i>Dans lequel un dragon apparaît.</i></a>
</li>
<li>
<a href="2.html">Chapitre 2 <i>Dans lequel un chevalier est convoqué.</i></a>
</li>
<li>
<a href="3.html">Chapitre 3 <i>Dans lequel une princesse est déçue.</i></a>
</li>
</ul>
Que viennent faire ici les éléments i ? Ne doivent-ils pas être réservés à la présentation ? C’est
vrai et nous sommes dans ce cas. Vous pourriez employer tout aussi facilement des éléments
span, mais i est plus court à saisir et, plus important, si l’application des styles CSS échoue pour
une raison ou pour une autre, le texte sera au moins affiché en italique. À mon avis, cette solution de repli est acceptable.
Revenons aux fenêtres pop-up. Nous commençons par annuler l’affichage des éléments i et ne
les révélons que lors du survol du lien parent (voir Figure 5.8) :
ul.toc li {position: relative;}
ul.toc li a i {display: none;}
ul.toc li a:hover i {display: block; width: 6em;
position: absolute; top: 0; left: 100%;
margin: -1em 0 0 1em; padding: 1em;
background: #CDE; border: 1px solid gray;}
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 146
01/06/2011 14:12:10
Effets
Chapitre 5 147
Figure 5.8 : Du texte dans une fenêtre pop-up à côté des liens.
Et voilà de petites fenêtres pop-up ! Elles sont positionnées relativement aux éléments li parents
en raison de la déclaration position: relative (première ligne des règles CSS précédentes). Si
vous souhaitez les placer relativement au bloc de liens, il suffit d’appliquer le positionnement
relatif à l’élément ul et d’ajuster leur emplacement. Par exemple, voici comment les déplacer
sous le dernier lien de la liste (voir Figure 5.9) :
ul.toc {position: relative;}
ul.toc li a i {display: none;}
ul.toc li a:hover i {display: block; width: 6em;
position: absolute; top: 100%; right: 0;
margin: 1em 0 0 1em; padding: 1em;
background: #CDE; border: 1px solid gray;}
Figure 5.9 : Du texte dans une fenêtre pop-up sous les liens.
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 147
01/06/2011 14:12:11
148
CSS – Techniques professionnelles pour une mise en page moderne
En développant cette technique, nous sommes en mesure de créer des menus imbriqués sur
plusieurs niveaux, ce qui constitue l’objet de la section suivante.
Menus en CSS
Si vous le souhaitez, vous pouvez exploiter le principe des fenêtres pop-up CSS pour créer des
menus contextuels imbriqués sur plusieurs niveaux (personnellement, je n’aime pas les menus
contextuels, mais je n’aime pas non plus le chocolat, le café, les boissons pétillantes ou n’importe
quelle forme d’alcool, alors, mon avis compte peu). Cette technique précise a le grand avantage
de montrer que les effets de survol ne sont pas l’apanage des liens hypertextes.
Voici le balisage de référence, avec des URL simplifiées pour faciliter la lecture (voir Figure 5.10) :
<ul class="menu">
<li class="sub"><a href="/s1/">Section 1</a>
<ul>
<li><a href="/s1/ss1/">Sous-section 1</a></li>
<li><a href="/s1/ss2/">Sous-section 2</a></li>
<li><a href="/s1/ss3/">Sous-section 3</a></li>
</ul>
</li>
<li class="sub"><a href="/s2/">Section 2</a>
<ul>
<li><a href="/s2/ss1/">Sous-section 1</a></li>
<li><a href="/s2/ss2/">Sous-section 2</a></li>
</ul>
</li>
(…etc…)
</ul>
Figure 5.10 : Les sous-menus révélés.
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 148
01/06/2011 14:12:11
Effets
Chapitre 5 149
Jusque-là, tout est normal. Masquons à présent les sous-menus :
li.sub ul {display: none;}
Il nous faut évidemment un moyen de les réafficher. Voici la solution la plus simple et, tout au
moins visuellement, satisfaisante :
li.sub:hover > ul {display: block;}
Elle déclenche l’affichage des sous-menus à leur place, en repoussant tous les éléments qui suivent vers le bas. Grâce à un positionnement, vous pouvez les faire apparaître juste à côté de
l’élément parent (voir Figure 5.11), sans qu’ils interviennent sur la mise en page de la suite du
document :
li.sub {position: relative;}
li.sub:hover > ul {display: block; position: absolute; top: 0; left: 100%;
margin: 0; background: white;}
Figure 5.11 : Le menu contextuel.
Le nombre de niveaux de menus imbriqués n’est pas limité. Si vous le souhaitez, vous pouvez en
créer dix-sept. Vous devriez probablement avoir honte d’un tel désir, mais vous pouvez néanmoins le satisfaire.
Quant à l’emplacement des menus, vous êtes limité uniquement par les deux dimensions de la
page et par votre imagination. Vous pouvez placer les menus de premier niveau en travers de la
partie supérieure de la page, avec les sous-menus de premier niveau placés en dessous (voir
Figure 5.12), et les menus des niveaux suivants apparaissant à côté. Il s’agit simplement d’écrire
les règles CSS appropriées. Vous pouvez commencer avec les suivantes :
ul.menu > li {display: inline; position: relative;}
ul.menu ul {display: none;}
ul.menu li.sub:hover > ul {display: block; position: absolute; white-space:
nowrap;}
ul.menu > li.sub:hover > ul {top: 100%; left: 0;}
ul.menu ul li.sub:hover > ul {top: 0; left: 100%;}
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 149
01/06/2011 14:12:11
150
CSS – Techniques professionnelles pour une mise en page moderne
Figure 5.12 : Menus déroulants.
Dans ce cas, seuls les menus de premier niveau sont déroulants. Les suivants se placent à droite
de leur parent.
Technique de boxpunching
Vous voudrez parfois apporter une certaine fantaisie à la page. La technique de boxpunching,
qui consiste à retirer de la vue certaines parties d’une boîte, pourra vous y aider. Elle fonctionne
uniquement avec des arrière-plans de couleur unie ou des images d’arrière-plan fixes, mais elle
ouvre la porte à de nombreuses possibilités.
Sous sa forme la plus simple, le boxpunching consiste à placer une boîte dans l’angle d’une autre
(voir Figure 5.13), en faisant en sorte que son arrière-plan corresponde au contenu englobant,
non à celui du parent :
body {background: #C0FFEE;}
div.main {background: #BAD;}
.punch {background: #C0FFEE; font-size: 500%;
float: left; margin: 0 0.1em 0.1em 0; padding: 0.1em;}
<div class="main">
<h1 class="punch">Hi.</h1>
(…contenu…)
</div>
Dans une utilisation plus complexe, vous pouvez appliquer un arrière-plan à la boîte décalée et
ajouter une bordure épaisse pour la séparer du reste de la boîte (voir Figure 5.14) :
body {background: #C0FFEE;}
div.main {background: #BAD;}
.punch {background: #987; font-size: 500%;
float: left; margin: 0 0.1em 0.1em 0; padding: 0.1em;
border: 0.2em solid #C0FFEE; border-width: 0 0.2em 0.2em 0;}
© 2011 Pearson Education France – CSS – Eric A. Meyer
Livre 1.indb 150
01/06/2011 14:12:12
