Le rond est un élément graphique qui revient régulièrement dans le webdesign. Lorsque l’on doit intégrer les idées d’un graphiste, on se retrouve régulièrement à dessiner un rond avec du texte en CSS. Je vais vous expliquer comment réaliser cette prouesse en CSS.
Comment dessiner un rond en CSS ?
Comme très souvent, la première étape va être la structure du HTML :
Structure HTML
<div class="circle"> Mon Text </div>
Il suffit juste d’encapsuler un texte dans une <div> (ou un <span> ou tout autre balise HTML) et de lui donner une class, ici “circle”, qui nous servira à l’instancier en CSS.
Le CSS
Pour le CSS dans un premier temps, ça sera très simple. Il vous suffira premièrement de faire un carré :
.circle{ margin:10px; width:100px; background:#FF0000; height:100px; text-align:center; }
Vous devriez obtenir quelque chose comme :
Rien de très palpitant pour le moment… Mais vous allez voir, on a bientôt fini.
Transformer le carré en rond !
Pour transformer notre carré en rond, nous allons arrondir les angles. Pour arrondir les angles, on utilise la propriété “border-radius” (Attention : certains navigateurs demandent un prefix ‘-moz-‘ pour firefox, ‘-webkit-‘ pour IE…)
Et on va lui donner la même valeur que le “width” et le “height” :
.circle{ margin:10px; width:100px; background:#FF0000; height:100px; text-align:center; <strong>border-radius:100px;</strong> }
Vous devriez avoir finalement ce résultat :
Maintenant que notre rond est dessiné, il nous faut aligner le texte.
Aligner un texte dans un rond
Pour cela vous avez deux possibilités :
Aligner un texte d’une ligne dans un rond
Pour aligner un texte d’une ligne dans un rond, il vous suffit d’utiliser la propriété “line-height” et de lui donner la même valeur que le “height” duquel on enlève le margin :
.circle{ margin:10px; width:100px; background:#FF0000; height:100px; text-align:center; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong> }
Vous obtiendrez alors :
Le choses se compliquent si vous souhaitez avoir un texte avec plusieurs lignes :
Aligner un texte de plusieurs lignes dans un rond
Structure HTML
<div class="circle multi-line"> Le site de <br /> Paul Gruson </div>
On ajoute à notre structure la classe “multi-line” qui nous permettra de différencier nos deux ronds.
Code CSS
Pour le CSS, on va réinitialiser notre “line-height” (15px) puis, on jouera avec le “padding-top” et le “height”.
Attention : la somme du “padding-top” et du “height” doit être égale au “width”:
.circle.multi-line{ line-height:15px; height:70px; padding-top:30px; /* 70 + 30 = 100 */ }
Vous devriez ainsi obtenir ainsi :
Bien entendu, il ne vous reste plus qu’à donner du style à votre rond et à votre texte. Et vous obtiendrez ainsi une superbe vignette.
Retrouvez l’intégralité du code en suivant ce lien : Cliquez Ici
Enjoy it !
Pingback: Tuto CSS - Aligner verticalement une image - Le Site de Paul Gruson()
Pingback: Css | Pearltrees()