HTML/CSS: 8 méthodes pour créer des boîtes à coins arrondis

css_rounded_box_logo

Pour ceux qui ne sont ni designer, ni graphiste, il est souvent difficile de se construire son propre design. Les idées ne manquent pas, mais la difficulté réside plutôt dans leur mise en oeuvre. Les designs obtenus sont donc simples, voir rudimentaires.
Une façon de tromper un peu son monde est d’ajouter quelques petites fioritures comme par exemple, des coins arrondis. Voici quelques techniques HTML, CSS et/ou javascript pour obtenir de belles boîtes à coins arrondies.

En attendant CSS 3

Comme dans beaucoup de cas, énormément de sites traitent du sujet Rounded corners, mais finalement très peu fournissent des solutions inédites. En fait, on s’aperçoit assez vite, que tous s’inspirent de deux ou trois méthodes, que l’on retrouve donc partout, avec des adaptations plus ou moins heureuses.

Les méthodes peuvent être classées en fonction des technologies utilisées:

  • HTML/CSS pur,
  • Utilisation de Javascript ou pas,
  • Utilisation d’images ou pas.

Chacune des techniques n’est pas forcement adaptée à tous les cas. J’ai différencié deux cas:

  • Les boîtes dont il faut arrondir les angles sont de couleurs unies, sans bordures, ni décoration
  • Les boîtes qui présentent un fond plus élaboré (dégradé par exemple), ou des bordures asymétriques (ombres, effets épaisseur, …)

Dans le premier cas les méthodes sans images, utilisant Javascript sont les plus efficaces. Elles sont compactes et rapides. Pour les autres, l’emploi d’images est obligatoire. Attention, le Javascript ne fonctionne pas partout.

Le choix peut également être influencé par le code HTML requis: les méthodes n’utilisant pas de Javascript, nécessitent en effet d’ajouter du code HTML (balises div, span, …) qui n’a aucun sens d’un point de vue contenu. Les puristes y trouveront donc un manque d’élégance.

Toutes les méthodes présentées ci-dessous supportent

  • Les changements de taille, ainsi que les fonctions zoom des navigateurs,
  • Les navigateurs « modernes » (je n’ai pas insisté sur le cas Internet Explorer 6).

Résumé des caractéristiques principales:

Méthode Technologies Usage
JS IMG IMG
unique
Fond
complexe
Bordures
asymétriques
DomCorners O/N O N N
Editsite O N N N N
CSS Teaser Box Non Oui Non Oui
CSS Teaser Box Revisited Non Oui Non Non Oui
Nifty corners Oui/Non Non Non Non Non
Trashbox Non Oui Non Oui Oui
Simplebox Non Oui Non Non Oui
Even more rounded corners Oui Ou Non Non Oui

Commentaires sur les méthodes:

DomCorners

Le principe est d’utiliser une image unique, contenant les quatres coins. Ensuite, il existe deux variantes: l’une basée sur des balises HTML supplémentaires, l’autres basée sur un script Javascript (2 Ko).

EditSite Rounded Corners

Cette méthode se base uniquement sur un script Javascript, un peu lourd (6 Ko). D’un point de vue HTML/CSS, les boîtes que l’on souhaite « arrondir », doivent juste inclure class="rounded". La compatibilité avec Internet Explorer 6 est limitée.

CSS Teaser Box

Cette méthode ne fonctionne qu’avec des boîtes de taille fixe. Elle utilise des éléments internes (notamment des balises du type <h3> ) pour éviter l’insertion de balises div dédiées à la mise en forme.

CSS Teaser Box Revisited

Il s’agit d’une version améliorée de la méthode précédente. Cette fois, les variations de hauteur et de largeur sont gérées. La méthode reprend globalement les principes de la précédente, en utilisant une image en plus.

Nifty Corners

Cette méthode est très répandue. Elle est reprise par un très grand nombre de sites. Nifty Corners existe en deux variantes: la première n’utilise que des balises HTML (5 balises pour le haut et 5 pour le bas), et la seconde est intégralement basée sur du Javascript (script de 3Ko). Personnellement, je préfère la seconde, parce que le script est relativement discret, et parce que la première demande beaucoup trop de balises supplémentaires.

TrashBox

Cette méthode basée sur les styles et les images, ne demande que deux balises HTML supplémentaires. Elle est simple à mettre en œuvre, et n’est limitée que par la taille des images utilisées.

SimpleBox

Simplebox est un méthode robuste qui supporte les boîtes à largeur variable. Le code HTML nécessaire (ajout de 10 balises), et le nombre d’images (8 au total), en font une méthode un peu lourde à utiliser.

Even more rounded corners

Globalement cette méthode reprend le principe utilisé par TrashBox. Le nombre d’images est limité à 4, et nous ne devons rajouter que deux balises HTML. J’ai ajouté cette méthode à la liste, pour l’exemple qu’il propose, et qui mélange « coins arrondis », transparence, et manipulation des boîtes via Javascript.

CSS 3

Le cas des « coins arrondis » est pris en compte directement dans CSS 3.
Le code suivant donnera bien une boîte bleue aux coins arrondis:
Pour le CSS:

.rounded { background-color: #0000AA; border: 1px solid #0000FF; border-radius: 1em; }

Pour le HTML:

<div class="rounded">... contenu ...</div>

Nous pouvons déjà obtenir ce type de rendu avec Firefox et Safari avec les styles suivants:

.rounded { -webkit-border-radius: 1em ; /* for Safari */ -moz-border-radius: 1em; /* for Firefox */ }

Malheureusement pour nous, aujourd’hui, ces nouveaux paramètres ne sont pas supportés par tous les navigateurs. Il va donc falloir encore attendre un peu.

Pour tout savoir sur les coins arrondis et CSS3, je vous conseille la lecture de l’excellent article de 24 ways.

Conclusion

Difficile de choisir entre toutes les méthodes. Leur fonctionnalité sont équivalentes, et sauf surprise, elles sont toutes assez stables, sur la plupart des navigateurs. Après quelques tests, j’en ai retenu deux:

  • Trashbox pour une méthode sans Javascript, permettant de gérer des boîtes au design un peu travaillé (bordures asymétriques, dégradé …),
  • DomCorners pour les boîtes simples. Cette méthode mélange image et Javascript de façon simple et très compacte.

D’une manière générale, il faut bien vérifier la méthode choisie, par rapport aux différents navigateurs, et regarder notamment, le rendu des boîtes dans des navigateurs qui ne supportent pas la méthode en question (le contenu reste-t-il lisible?).

Pour être totalement exhaustif, vous trouverez des listes de méthodes sur CSS-Discuss Wiki et CSS Juice.

1 thought on “HTML/CSS: 8 méthodes pour créer des boîtes à coins arrondis”

Laisser un commentaire

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