Créer un cadre arrondi
CHAPITRE 14
195
Cadre élastique dans les deux dimensions
Il est plus délicat d’arrondir un cadre étirable à la fois en hauteur et en largeur.
Aucune des nombreuses méthodes possibles n’est idéale ; nous n’en exposons ici
qu’une seule.
Si l’on excepte la propriété -moz-border-radius et les pseudo-éléments :before et
:after, toutes ces méthodes d’habillage polluent la sémantique de la structure
HTML par l’introduction de plusieurs éléments
CHAPITRE 14
195
Cadre élastique dans les deux dimensions
Il est plus délicat d’arrondir un cadre étirable à la fois en hauteur et en largeur.
Aucune des nombreuses méthodes possibles n’est idéale ; nous n’en exposons ici
qu’une seule.
Si l’on excepte la propriété -moz-border-radius et les pseudo-éléments :before et
:after, toutes ces méthodes d’habillage polluent la sémantique de la structure
HTML par l’introduction de plusieurs éléments
ou ![]()
. La règle de séparation entre le fond (HTML) et la forme (CSS) n’est plus respectée.
Le compromis que nous proposons est l’un des moins mauvais. Il s’agit de créer les
quatre arrondis dans un programme de dessin puis de les placer un par un en position
absolue, dans un conteneur lui-même positionné relativement.
Ces coins (présentés à la figure 14-6) relevant uniquement de la décoration et pas du
contenu, nous préférerons recourir à l’élément neutre
Le compromis que nous proposons est l’un des moins mauvais. Il s’agit de créer les
quatre arrondis dans un programme de dessin puis de les placer un par un en position
absolue, dans un conteneur lui-même positionné relativement.
Ces coins (présentés à la figure 14-6) relevant uniquement de la décoration et pas du
contenu, nous préférerons recourir à l’élément neutre
qu’à la balise ![]()
.
RÉFÉRENCE Pseudo-éléments :before et :after
Le blog de Nanoum développe très clairement cette utilisation des pseudo-éléments :before et
:after, ainsi que d’autres techniques :
B http://www.nanoum.net/blog/5_before_et_after.html
RESSOURCE Bilan sur les méthodes de coins arrondis
Toutes les techniques inventées pour la création de cadres à coins arrondis sont
recensées sur une page web en anglais :
B http://www.smileycat.com/miaow/archives/000044.html
En français, on ne trouve qu’un rapide comparatif entre certaines méthodes :
B http://www.e-t172.net/articles/round/
C’est l’une d’entre elles que nous reprenons ici.
Figure 14–6
Les quatre coins
RÉFÉRENCE Pseudo-éléments :before et :after
Le blog de Nanoum développe très clairement cette utilisation des pseudo-éléments :before et
:after, ainsi que d’autres techniques :
B http://www.nanoum.net/blog/5_before_et_after.html
RESSOURCE Bilan sur les méthodes de coins arrondis
Toutes les techniques inventées pour la création de cadres à coins arrondis sont
recensées sur une page web en anglais :
B http://www.smileycat.com/miaow/archives/000044.html
En français, on ne trouve qu’un rapide comparatif entre certaines méthodes :
B http://www.e-t172.net/articles/round/
C’est l’une d’entre elles que nous reprenons ici.
Figure 14–6
Les quatre coins