<hier>WEBLOG</hier>

Lundi 20 Avril 2009 | link |

Coins arrondis en CSS

Extrait d'un courrier reçu il y a quelques jours :

J'essaye de créer un site avec la même base que www.kitgrafik.com c.a.d un fond de couleur unique avec par dessus un rectangle avec les angles arrondis qui s'adapte au contenu.
Pouvez vous m'indiquer la marche à suivre ?

Il y a tellement de ressources sur le web pour créer des coins arrondis, que je ne n'estimais pas pertinent d'y consacrer un chapitre. Mais puisqu'on me le demande, peut-être que le sujet mérite effectivement un rappel de différentes techniques, trois tout du moins que je qualifierais "de base".

1. La technique pure CSS, mais qui n'est pas encore implémentée par tous les navigateurs, utilisant border-radius ;
2. La technique utilisant des div à qui on affecte une image de coin en image de fond ;
3. La technique made-in Raphaël Goetter, utilisant une image coulissante.

Code CSS commun aux trois techniques

On commence par indiquer les propriétés des paragraphes et des titres utilisés dans cet exemple, c'est à dire les marges internes et externes nécessaires :

p, h3 {
padding:5px 10px;
margin:0;
}

Technique 1 : border-radius

Code (x)html

<div class="coins">
 <h3>Lorem Ipsum</h3>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Mauris vulputate laoreet urna. Integer magna. 
 Donec facilisis lectus sed quam. 
 Curabitur sit amet lacus id lacus facilisis venenatis.
 </p>
</div>

Codes CSS

Dans les normes CSS3 attendues avec impatience, il y a donc cette propriété qui permet de créer un cadre avec des coins arrondis.

Exemple 1

Tous les coins arrondis alternativement de 50 et 10 pixels (la première valeur concerne le coin en haut à gauche, et on tourne dans le sens des aiguilles d'une montre) :

.coins {
border:1px solid #B0C4DE;
background-color:#E4EFFF;
border-radius:50px 10px 50px 10px;
}

Exemple 2

Tous les coins arrondis de 10 pixels :

.coins {
border:1px solid #B0C4DE;
background-color:#E4EFFF;
border-radius:10px;
}

On pourra préférer de mettre l'unité en em d'ailleurs...

Avantage

C'est d'une simplicité enfantine à mettre en place et pas besoin d'images.

Inconvénient

Il est de taille : aucun navigateur ne l'implémente de cette façon pour l'instant. Pour une raison que je ne m'explique pas, seuls les navigateurs de la firme Mozilla (Firefox, SeaMonkey) et Safari permettent de profiter de cette technique, mais en rajoutant un préfixe qui leur est propre : -moz- pour Mozilla et -webkit- pour Safari et Chrome. Quant à MSIE et Opéra, nada pour l'instant.

Le code CSS à écrire sera donc :

.coins {
border:1px solid #B0C4DE;
background-color:#E4EFFF;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

Visionner l'exemple

Haut

Technique 2 : plusieurs div imbriqués

Ceci n'est qu'une variante du tutoriel "plusieurs images de fond"...

Code (x)html

<div class="coins2">
 <div id="hg">
  <div id="hd">
   <div id="bd">
    <div id="bg">
     <h3>Lorem ipsum</h3>
     <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Mauris vulputate laoreet urna. Integer magna. 
     Donec facilisis lectus sed quam. 
     Curabitur sit amet lacus id lacus facilisis venenatis.
     </p>
     </div><!-- /bg -->
    </div><!-- /bd -->
  </div><!-- /hd -->
 </div><!-- /hg -->
</div><!-- /coins2 -->

On utilise donc plusieurs div imbriqués pour définir les quatre coins, chacun ayant en image de fond son petit coin de couleur identique à celle du cadre <div class="coins2">.

Code CSS

.coins2 {
background-color:#E4EFFF;
}
#hg {
background:url(images/coin1.png) no-repeat top left;
}
#hd {
background:url(images/coin2.png) no-repeat top right;
}
#bd {
background:url(images/coin3.png) no-repeat bottom right;
}
#bg {
background:url(images/coin4.png) no-repeat bottom left;
}

Visionner l'exemple

Avantages

C'est compatible avec tous les navigateurs, et le cadre est étirable à toutes les résolutions en cas de design fluide.

Inconvénient

Trop de div tuent les div... On frole la div-soupe indigeste !

Haut

Technique 3 : l'image coulissante

Cette technique avait été présentée par Raphaël Goetter lors de notre atelier CSS de ParisWeb 2007.

Il s'agit de faire une seule image, très haute, avec ses 4 coins arrondis. Celle que j'ai utilisé pour cet exemple fait 802 pixels de largeur sur 2002 pixels de hauteur et elle ne pèse que 9 ko.

L'astuce consiste à associer le bas de cette image au cadre, et le haut au titre du paragraphe h3 (ou tout autre élément qui sera en haut du cadre). L'image coulissera en fonction de la hauteur du texte (dans la limite des 2002 pixels de l'image).

Code (x)html

<div class="coins3">
 <h3>Lorem Ipsum</h3>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Mauris vulputate laoreet urna. Integer magna. 
 Donec facilisis lectus sed quam. 
 Curabitur sit amet lacus id lacus facilisis venenatis.
 </p>
</div>

Code CSS

.coins3 {
width:802px;
margin:auto;
background:#E4EFFF url(images/coin5.png) no-repeat bottom center;
}
.coins3 h3 {
background:#E4EFFF url(images/coin5.png) no-repeat top center;
}

Visionner l'exemple

Avantages

Méthode compatible avec tous les navigateurs, facile à réaliser.

Inconvénient

La largeur du cadre est fixé par la largeur de l'image. Elle est donc incompatible avec un design fluide.

Haut

Technique 4 : une seule image coulissante en hauteur et en largeur

[edit] Suite à la remarque de tfe ci-dessous, voici une 4^ème méthode pour réaliser des coins arrondis en CSS, mais avec une seule image.

Haut

| Laisser un commentaire |

| Index | Avant | Archives |

---