Les divers blocs et boîtes HTML, constituants élémentaires de la mise en page, sont
par défaut rectangulaires donc anguleux. Pour obtenir des fantaisies graphiques telles
que des arrondis, il est nécessaire de fabriquer des habillages sur mesure.
Principe et méthodologie
La version 3 des CSS prévoira une propriété pour l’arrondi des coins des blocs. Pour
aboutir à ce genre d’effets et assurer la compatibilité sur tous les navigateurs, nous
devons dans l’immédiat recourir à diverses bidouilles. Il s’agit simplement de doter
d’une image de fond tout bloc de texte (
par défaut rectangulaires donc anguleux. Pour obtenir des fantaisies graphiques telles
que des arrondis, il est nécessaire de fabriquer des habillages sur mesure.
Principe et méthodologie
La version 3 des CSS prévoira une propriété pour l’arrondi des coins des blocs. Pour
aboutir à ce genre d’effets et assurer la compatibilité sur tous les navigateurs, nous
devons dans l’immédiat recourir à diverses bidouilles. Il s’agit simplement de doter
d’une image de fond tout bloc de texte (
,
ou autre) dont on souhaite
arrondir les angles.
Se pose évidemment la question de l’élasticité du bloc, susceptible de varier en hauteur comme en largeur (selon le choix de police, la longueur du texte, le souhait du
designer d’adapter la largeur de la boîte à celle de la fenêtre du navigateur, etc.). On
sait pourtant que les images de fond, statiques et figées, ne peuvent pas s’étirer.
Nous étudierons d’abord le cas d’un cadre de largeur fixe (et de hauteur variable)
pour enchaîner sur la situation plus complexe d’un cadre à deux degrés de liberté. Les
techniques employées diffèrent dans chaque situation.
14
Créer un cadre arrondi
arrondir les angles.
Se pose évidemment la question de l’élasticité du bloc, susceptible de varier en hauteur comme en largeur (selon le choix de police, la longueur du texte, le souhait du
designer d’adapter la largeur de la boîte à celle de la fenêtre du navigateur, etc.). On
sait pourtant que les images de fond, statiques et figées, ne peuvent pas s’étirer.
Nous étudierons d’abord le cas d’un cadre de largeur fixe (et de hauteur variable)
pour enchaîner sur la situation plus complexe d’un cadre à deux degrés de liberté. Les
techniques employées diffèrent dans chaque situation.
14
Créer un cadre arrondi