January 6, 2006

Fini les coins carrés !

Posted by

ccl@emakina.fr

En attendant l’arrivée des CSS 3.0 (Cascading Style Sheets 3.0, en français : Feuille de style de niveau 3), voici un petit avant goût, via un exemple ci-dessous de ce qu’il sera possible d’obtenir : des coins arrondis (joie dans les foyers des webdesigners !) avec “du simple code” (fini les prises de tête, pour caler des petites images !).
Pour l’instant seul Firefox et certains navigateurs basées sur Mozilla supportent totalement les CSS de niveau 3.0 (via un code aménagé : Cf. ci-dessous)


Pour réaliser, ces coins arrondis il faut utiliser l’attribut radius (de la propriété border) qui est l’une des innovations majeures des CSS 3.0.

Voici un exemple d’utilisation

border-top-right-radius (comme cette attribut n’est pas encore validé par le W3C, seul l’équivalent pour mozilla marche soit : moz-border-radius-topright) donne :

topborderright.gif

Note : Bien entendu on peut affiner la courbure du cercle via diverses valeurs.

Plus d’infos sur l’attribut border : http://www.w3.org/TR/2002/WD-css3-border-20021107/

D’autres effets sont disponibles au niveau des bordures tels des effets de “vague”, d’ombrés …

Nicolas Fabre

En regardant la roadmap du WC3 pour le CSS3 on peut estimer une sortie officielle vers 2008.
http://www.w3.org/Style/CSS/current-work#table

Thomas

Il est clair que la montée en puissance des navigateurs basés sur Gecko relance peu à peu l’innovation en matière de création Web.
Reste à savoir ce que supportera IE7 en matière de CSS3…

aria

En espérant qu’en 2008, ce style (coins arrondis genre années 70) soit encore à la mode!