Médiaforma

Dessinez des formes en CSS3

Print Friendly

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.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply