<hier>Avril 2009</hier>

20

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

Merci pour ce bon récapitulatif.
Un mix entre le 2 et le 3 est peut-être possible via les css sprites, avec "seulement" 4 div, et le positionnement de l'image correct?
http://www.google.com/search?q=css+sprites+boxes

tfe - 21-04-2009 - 12:20

Oh, oui, tout est possible ! Suffit de mettre les mains dedans ;)

Dernière minute : Appel à propositions pour ParisWeb 2009 !
http://www.paris-web.fr/2009/appel-a-propositions-pour-les

Pascale - 21-04-2009 - 17:17

J'ai tenté l'expérience tfe !

Encore 4 div... Mais ça a l'avantage de laisser plus de liberté pour le design.
Ça t'intéresse ?

Pascale - 22-04-2009 - 11:13

Lassé de passer trop de temps à peaufiner mes CSS, j'ai fini par ne plus trop me préoccuper des utilisateurs de MSIE. Faire trop d'efforts pour gommer les défauts de ce navigateur, c'est aussi soutenir la politique de Microsoft.

Firefox va bientôt franchir les 50% de part de marché, un beau pied de nez à Microsoft.

Professeur Carbure - 25-04-2009 - 07:17

LOL !
http://www.elliottkember.com/ie.html

Pascale - 25-04-2009 - 13:36

J'espère que tu vas proposer quelque chose pour PW ;-)

Neovov - 27-04-2009 - 17:26

Arf ;-)

Pour cela il me faudrait une idée de "quelque chose"... et un binôme aussi ;)

Pascale - 28-04-2009 - 13:17

Et hop, un nouveau tuto :
http://css.mammouthland.net/image-coulissante-pour-coins-arrondis.php

Pascale - 01-05-2009 - 09:23

Oh, merci Pascale pour ce nouveau tuto.
Chapeau, c'est exactement ce à quoi je pensais.

Désolé du manque de réactivité.

tfe - 23-05-2009 - 14:13

Salut,

Toujours impressionné par les solutions proposées par Raphaël Goetter... Pour ma part, je pense qu'avec deux images ce n'est pas mal non plus (une en haut avec deux coins arrondis, l'autre en bas pareil) avec deux inconvénients :
- même limitation que la technique 3 : pas de largeur extensible à "l'infini"
- obligation d'utiliser une couleur de fond "codable" pour remplir entre les deux images.
Je suppose qu'on va s'empresser de me dire que c'est "hazbine" comme façon de faire :)

On est bien d'accord que du border-radius pour tous ne ferait de mal à personne. Ca fait une paie que je n'ai pas touché aux CSS et je constate que rien n'a changé : les uns font ce qu'ils veulent, les autres essaient de coller aux standards. Encore heureux qu'on parle de convergence, qu'est-ce que ça serait sinon!

En tout cas merci pour ce récapitulatif, je cherchais justement un résumé des principales solutions existantes :)

microtom - 26-06-2009 - 11:11

Bonjour, j'ai testé vos méthodes et je dois admettre que ça en jette. Toutefois, je n'arrive pas a caler votre CSS dans une feuille de style pour la méthode 3 (et sa petite soeur dans les com :)). Pour que ça fonctionne, le style dois se trouver sur la page :(

Avec vous une solution ?

Merci.

Gom3 - 02-07-2009 - 15:40

Ça doit être un problème de priorité (voir le diaporama http://css.mammouthland.net/parisweb/atelier-2008.pdf diapos 17 à 22)

Contactez-moi en privé, car ici je vais fermer les commentaires ;) (spam spam spam...)

Pascale - 02-07-2009 - 18:27

Haut de page

| Index | Archives | « Février 2009 | Juin 2009 » |