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 : 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 :

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

7 commentaires
  1. lili 10 années ago

    merci pour le détail

  2. FIl 9 années ago

    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

  3. Auteur
    Admin 9 années ago

    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

  4. FIl 9 années ago

    merci

  5. doounia 8 années ago

    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();
    });

  6. Auteur
    Admin 8 années ago

    quelle version d’IE?

  7. doounia 8 années ago

    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épondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

onze + treize =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?