Astuce CSS, bords arrondis en image sans découper
Il est de coutume chez les web designers de vouloir intégrer dans leurs sites web des blocs ou boutons aux bords arrondis. De prime abord, deux solutions s'offrent à eux : la découpe d'images ou le CSS 3. Il existe cependant une méthode très simple pour réaliser des blocs extensibles verticalement ou horizontalement en utilisant qu'une seule image et du CSS 2.
A nos débuts en tant que web designers, les bords arrondis étaient confectionnés avec l'utilisation de plusieurs images (bord gauche, centre répété et bord droit). Technique bien fastidieuse car elle demandait une découpe de trois images. Ce qui impliquait dans le code un bazar assez perturbant. On se retrouvait généralement avec un HTML de ce genre là :
Seulement voilà, le navigateur doit interpréter 3 blocs appelant chacun une image différente ce qui implique 3 aller-retours client/serveur et donc des chargement plus longs. Bien entendu, sur un bouton ce chargement est négligeable, mais imaginez ce traitement à l'échelle d'une page complexe avec plusieurs blocs et boutons différents.
De plus, le CSS et l'HTML pour réaliser ce genre de style est assez laborieux, et je ne vous parle même pas du CSS engendré pour gérer le rollover. Et si vous analysez le code, vous remarquerez que les div entourant le lien ne sont pas cliquables, ce qui rend l'accessibilité réduite.
Il existe bien entendu la solution du CSS 3 avec ses célèbres border-radius et background-gradient très efficaces mais pour l'instant pas assez démocratisés sur les navigateurs.
La méthode que je vous propose permet de pallier à tous ces problèmes par le simple code HTML suivant :
Intitulé du lien
En se servant de l'héritage, il suffit de créer maintenant une image et un CSS correspondant. Pour l'exemple, voici l'image que j'ai choisi.
Il s'agit en fait tout bonnement de faire le design du bouton de façon à pouvoir y insérer le plus grand texte possible (couramment la longueur est aux alentours de 300px).
Nous avons donc l'image et l'HTML, mais qu'en est-il du CSS ?
a.submit{
background: url('image/img.jpg') top left white;
padding-left: 5px;
}
a.submit span{
background: url('image/img.jpg') top right white;
padding-right: 5px;
display: inline-block;
line-height: 25px;
}
Code simple, une seule image, CSS basique ... et le tour est joué ! Sachez que cette astuce fonctionne sur tous les navigateurs (à partir d'IE8). Pour IE 7, il faut remplacer le display: inline-block; par position: relative; float: left; display: block;.
