Skip to content

CSS – Dessiner un rond avec du texte

Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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.

Dessiner un rond 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 :

Le carrée en CSS

 

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 :

Dessiner un rond en CSS

 

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 :

Aligner texte dans un rond

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 :

Aligner plusieurs lignes dans un rond

 

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 !

Soyez Sociable ! Partagez !
Published inTutoriel
  • James

    phat … tu dois t’ennuyer l’hiver non ?

  • Bonjour a tous,

    J’ai un site assez graphique a réaliser pour un client.

    Celui ci me demande d’écrire du texte dans un rond et le contenu doit suive les bords ( je vous rassure le texte est bien écris a plat)…

    Je ne sais pas si je m’exprime assez clairementµ.
    En gros comme dans l’exemple de Paul mais avec plus de contenu et un cercle plus gros.

    Merci de votre aide

    • il faut faire varier le width et le height pour faire varier la grosseur du rond.

  • Pingback: Tuto CSS - Aligner verticalement une image - Le Site de Paul Gruson()

  • Pingback: Css | Pearltrees()

banner