Médiaforma

All posts tagged border-radius

Avec CSS3, il est désormais très simple de dessiner des formes élémentaires dans un navigateur compatible. Dans cette rubrique, je vais vous montrer comment créer un carré, un rectangle, un cercle et un ovale avec quelques instructions CSS3. Voici le résultat attendu :

formes css3

Le code utilisé est extrêmement simple :

formes css3

Chacune des formes est dessinée à l’aide d’un élément div.

Examinons le code CSS.

L’élément d’identifiant #carre a une hauteur et une largeur de 100 pixels et son arrière-plan est de couleur #01B0F0.

L’élément d’identifiant #rectangle a une largeur de 200 pixels, une hauteur de 100 pixels et un arrière-plan de couleur #BD8D46.

Jusqu’ici, les instructions utilisées sont disponibles en CSS 2 et 3. La définition d’un cercle et d’un ovale sont un peu plus complexes. Elles ne pourront se faire qu’en CSS3.

L’élément d’identifiant #cercle a une hauteur et une largeur de 100 pixels et son arrière-plan est de couleur #AEEE00. En définissant une bordure de rayon 50 pixels (c’est-à-dire de la moitié du côté du div), on obtient un cercle. C’est aussi simple que cela ! La propriété border-radius a été finalisée en Février 2011. Si votre navigateur est postérieur à cette date, il devrait bien l’interpréter.

Enfin, l’élément d’identifiant #ovale a une hauteur de 100 pixels et une largeur de 200 pixels et son arrière-plan est de couleur #002F2F. La bordure comporte deux rayons : un horizontal de 100 pixels et un vertical de 50 pixels. La forme obtenue est donc ovale.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, nous allons voir comment définir une balise <div> à coins arrondis en CSS3. Plutôt que d’écrire le code CSS à la main, nous allons utiliser un générateur en ligne. Nous nous rendons sur la page http://border-radius.com/.

Il suffit d’entrer un rayon de courbure, en pixels, dans les cases qui apparaissent aux quatre angles du rectangle pour que le code CSS soit généré. Ici par exemple, nous choisissons un rayon de courbure général de 30 pixels et un rayon de courbure de 120 pixels pour le coin supérieur droit.

Remarquez qu’il est possible d’alléger le code en décochant une ou plusieurs cases. Mais attention, le code CSS ne fonctionnera plus dans les navigateurs décochés.

Il suffit maintenant de copier-coller le code CSS dans un document.

Voici le résultat de ce code dans Internet Explorer :