Simplifiez vos coins arrondis

Je ne vais pas vous refaire ici tout l’argumentaire des avantages d’une mise en page réalisées grâce aux feuilles de styles (donc évitant tout recours à des tableaux de mise en forme), il n’empêche que réaliser des boîtes avec des coins arrondis tout en respectant la sémantique et les règles érigées par le W3C est un véritable casse-tête. Plusieures solutions ont déjà été proposées pour faire des coins arrondis, mais rien de très pratiques. En tout cas pas autant que la future propriété border-radius des CSS 3 : The ‘border-radius’ properties (déjà supportée par la famille des navigateurs Mozilla et que j’utilise sur ce site).

Il n’empêche que le site italien Pro HTML vient de proposer une solution plutôt élégante basée sur une utilisation astucieuse des CSS? et du DOM?? : Nifty Corners: rounded corners without images. Pour voir la bête en action, je vous recommande ces deux exemples :

Sympa, non ?

Un commentaire sur “Simplifiez vos coins arrondis

  1. Nifty corners est effectivement élégant, astucieux et permet d’éviter l’utilisation d’image, mais moins rond et moins beau que « border-radius ». Merci pour tip !

  2. Les solutions full css avec images ne sont vraiment pas si mal que ça pour peu qu’on ait une approche assez pointue du html auquel les propriétés de style peuvent s’appliquer (c’est bien souvent ce qui manque d’ailleurs). L’avantage c’est que c’est applicable également à des bordures sophistiquées un petit topo que j’ai fait là dessus : http://clb56.freezee.org/test_roundcorner/

  3. border-radius est certe une utilisation du css3 mais il ne sagit que d’une utilisation sur firefox ! et non pas sur IE !!!

Laisser un commentaire