WebCssDesign

Coins arrondis avec jQuery CSS et une seule image

• Accueil
• Css
• Coins arrondis avec jQuery CSS et une seule image

L’idée est donc de pouvoir faire un cadre arrondi à n’importe quel élément d’une page sans répéter son code, en utilisant la librairie jQuery et en utilisant une seule image pour les quatres coins.

Tout d’abord, on va simplement attribuer une classe “rounded” aux éléments que l’on désire styler. Par exemple le cadre ci-dessous :

<div id="contenu_avec_jquery" class="rounded">

 <p>Ce cadre tout simple utilise jQuery et a de jolis coins arrondis...</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis

 pellentesque bibendum. Proin posuere felis id tellus. Phasellus eu felis. Nullam lacus ante,

 pellentesque vitae, tristique eu, commodo nec, mauris.</p>

</div>

Maintenant, on ajoute un peu de javascript (pensez bien à inclure la librairie jQuery avant dans votre page !). Ce code nous permettra de générer dynamiquement les balises nécessaires pour styler nos cadres de chaque élément utilisant la classe “rounded” dans la page :

$(document).ready(function(){

 $('div.rounded').wrap('<div class="cadre"></div>');

 $('div.cadre').prepend('<div class="cadre_hd"></div><div class="cadre_hg"></div>');

 $('div.cadre').append('<div class="cadre_bd"></div><div class="cadre_bg"></div>');

});

Je vous laisse utiliser votre éditeur d’images favori pour créer l’arrondi que vous désirez, pour ma part j’ai créer l’image de 22px/22px suivante :

Le fait de n’utiliser qu’une seule image va nous permettre de réduire considérablement le “poids” du cadre. À titre indicatif, l’image que j’utilise pèse 387 octets et la même découpée en 4 pour chaque coin amène un poids total de 953 octets.

Voilà, plus qu’à rajouter une pincée de CSS pour donner corps à nos cadres. Vous noterez que j’ai donné une dimension de 11px à chacun des coins du cadre et qu’ensuite je me suis contenté de décaler horizontalement et verticalement l’image de fond pour donner l’illusion d’un cadre arrondi.

.cadre{

 background-color: #bdb194;

 width: 30%;

}.cadre_hg, .cadre_hd,

.cadre_bg, .cadre_bd{

 width: 11px;

 height: 11px;

 background-repeat: no-repeat;

 font-size: 1px;

}

.cadre_hg{

 background: url('cadre_rounded.png') 0 0;

}

.cadre_hd{

 background: url('cadre_rounded.png') 11px 0;

 float: right;

}

.cadre_bg{

 background: url('cadre_rounded.png') 0 11px;

}

.cadre_bd{

 background: url('cadre_rounded.png') 11px 11px;

 float: right;

}

Testé sur :

• Firefox 2 sous Windows XP, Linux et Mac
• Safari sous Windows et Mac
• IE 7

Télécharger le tuto_coins_arrondis_jquery.zip (17.5Ko) contenant les fichiers de démo.