Partagez cet article:Share on Google+0Share on Facebook0Tweet about this on Twitter

img_titre

Si vous lisez cet article, c’est que vous aussi (peut-être), vous êtes intéressé à en savoir plus sur les ronds en Css3. Comme celui qui se trouve juste à Gauche dans le titre (dans la partie Blog). Rien de plus facile à créer de nos jours.

Nous allons nous concentrer seulement sur le border-radius.

Faire un rond

Voici une première façon de faire avec border-radius.

Code HTML

Code CSS

Explication du code

border-radius est une propriété permettant d’appliquer un rayon, ici à tous les cotés d’un élément. Par exemple une <div>.
height (la hauteur) et width ( la largeur) doivent être de la même taille si l’on veut le résultat ressemble à un cercle (Avait-vous déjà vu un cercle avec deux rayons différents ?)
background permet de remplir notre élément de la couleur Bleu (sinon notre rond serait invisible).

Le résultat

 

Vous pouvez à la place du background mettre un border ce qui permettra de créer un cercle comme dans la photo de l’article.

Quel navigateur peut l’interpréter ?

Chrome: A partir de la version 5.0
Firefox: A partir de la version 4.0
Internet Explorer: 9.0
Safari: 5.0

Attention aussi à la compatibilité des  navigateurs sur les <pourcentage> qui ne sont pas acceptés sur de veilles versions de navigateurs.

Un rond qui ne tourne pas rond

Notre rond comprend 4 angles. Dans l’ordre,  le côté  Haut Gauche, Haut Droite, Bas Droite et le Bas Gauche. Je ne vous l’ai pas mais  si vous enlevez le border-radius, vous aurez un simple carré.

Juste plus haut nous avons appliqué un border radius à 50% pour tous les angles. Voici donc un exemple, en mettant à chaque angle, un border-radius de 50%. On obtiendra le même résultat que précédemment.

Imaginons que nous laissons uniquement le coté Haut Gauche de notre carré avec un angle de 50% et que tout le reste des côtés restent à 0%.

Le résultat

On remarque qu’ici, seulement le côté haut droit de notre carré a un angle de 50%.

Vous pouvez vous amuser à créer de nouvelles formes en changeant le width, le height et le border-radius.

En savoir plus

Si vous souhaitez en savoir plus sur cet élément, vous pouvez consulter la plate-forme de Firefox MDN sur le border-radius