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 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 : cadre_rounded.png

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 :

  • 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.

A voir aussi

  • lili

    merci pour le détail

  • FIl

    Bonjour… et merci pour ce tuto ! il est très clair et intéressant.
    Je compte utiliser ce système pour un projet. Mon souci actuel concerne la comptabilité. Ce tutorial est-il fiable sur IE6 et IE8 ?

    Merci

  • Admin

    Cela fonctionne avec IE6 et IE8 mais je conseille plutôt ce tuto de « coins arrondis css » (utilisé par Google) et sans images:
    coins arrondis css

  • FIl

    merci

  • doounia

    Bonjour,
    J’essaye d’utilisé votre tuto pour les arrondis de mon menu, ca ne marche pas avec IE, il m’affiche les arrondis
    voici mon code:
    HTML:
    Qui sommes-nous

    HR Square en bref
    Nos valeurs
    L’équipe

    JAVASCRIPT:
    function hov(){
    $(« li#rounded »).hover(function(){
    $(this).prepend( »);

    },function(){
    $(this).find(‘div.cadre_hd’).css({visibility: « hidden »});
    $(this).find(‘div.cadre_hg’).css({visibility: « hidden »});
    });
    }

    $(document).ready(function(){
    hov();
    });

  • Admin

    quelle version d’IE?

  • doounia

    Bonjour,
    IE7, a mon avis il me manque qlq chose, en faite c’est comme si la liste perd son css (ca se met en une seule ligne)

Réseau

Sites