Comment encadrer un texte avec des arrondis en CSS ?
Vous avez envie d’encadrer des textes pour les embellir sans avoir recourt à des images ?
CSS3 permet de réaliser de jolies choses, mais toute les « options » ne sont pas reconnues par les navigateurs plus anciens.
-
Créer un cadre simple pour texte
Voici un petit bout de code qui dessinera un cadre :
<div style="width: 200px; padding-top: 50px; padding-bottom: 50px;border: 3px solid #A0A0A0; text-align: center;background: #C0C0C0;"> Mon texte </div>
Détaillons notre petit code
Les balises <div></div> créent un conteneur, un bloc de contenu.Le contenu ici c’est Mon texte
La partie style= » … » donne le style de ce cadre
width:200px; la largeur du cadre sera de 200 pixels
padding-top: 50px; la marge intérieur du haut sera de 50px
padding-bottom: 50px; la marge intérieur du bas sera de 50px
On aurait pu utiliser padding:50px 0px 50px 0x; on définit ainsi les marges intérieures en commençant par le haut et en tournant dans le sens des aiguilles d’une montre.
border: 3px solid #A0A0A0; la bordure sera de 3 pixel d’épaisseur de style solid et de couleur grise (#A0A0A0)
A la place de solid on aurait pu mettre dotted, dashed, inset, double, groove, ridge ou outset. (ouf !)
text-align:center; deviner ? (alignement horizontal centré)
Si vous ne mettez pas la largeur sous WordPress il prendra toute la largeur.
-
Créer un cadre avec les coins arrondis avec texte.
L’arrondi des coins n’est pas supporté par les anciens navigateurs, donc il ne faut pas trop compter dessus pour enjoliver le cadre.
Pour avoir les coins arrondis, il faut ajouter dans la déclaration des styles border-radius: 10px;
10px correspond au rayon des arrondis
Par exemple, avec ce code :
<div style="width: 200px; padding-top: 15px; padding-bottom: 15px; border: 3px solid #FF006E; text-align: center; background: #FF00DC;border-radius: 10px;"><strong> Mon texte </strong></div>
Bon le premier cadre était triste, celui-la est franchement flachi !
On peu également prendre des arrondis différents pour chaque coin. Les valeurs portent sur le coin supérieur gauche, puis on tourne dans le sens des aiguilles d’une montre.
Par exemple, en utilisant : border-radius: 20px 0 20px 0;
et border:5px dotted #267F00; (pointillés) au lieu de solid
On obtient :
Voici le code pour ce cadre là :
<div style="width: 100px; padding-top: 15px; padding-bottom: 15px; border: 5px dotted #267F00; text-align: center; background: #4CFF00; border-radius: 20px 0 20px 0;><strong>Mon texte</strong></div>
Bon le cadre n’est pas très esthétique, mais vous pouvez harmoniser les couleurs de ce bloc avec celles de votre site.
Une dernière remarque importante.
La propriété border-radius n’est pas reconnue par les anciens navigateurs, certains utilisent des préfixes comme -webkit- ; -moz- etc. Pour obtenir un code complet, vous pouvez jeter un œil aux générateurs de CSS3 en ligne ou vous former définitivement aux CSS3 et Html5 avec le livre Premiers pas en CSS3 et HTML5
Merci pour ces codes ! J’aime bien l’effet « arrondi » des encadrés. Mais j’aimerais centrer mon encadré, ou bien pouvoir écrire quelque chose sur sa droite. Je n’y parviens pas… Le curseur se place automatiquement dans mon encadré, qui n’est pas très grand. comment faire ? (blog sur wordpress). Merci !
Il faut ajouter margin: 0 auto; aux css du cadre à centrer. Pour que ça marche, il faut que le contenu et le contenant aient une largeur donnée.
Voilà 🙂
Bonjour,
Votre article est super, toutefois je cherche a faire des rectangle a bords arrondis mais je ne veux pas qu’ils soient posés les uns en dessous des autres, mais les uns à côté des autres. Pouvez-vous m’aider s’il vous plait ?
Merci
Stéphanie
Il faut ajouter display: inline-block; pour les afficher l’un à côté de l’autre.
A bientôt
Philippe
Bonjour,
Vous pouvez essayer de mettre votre contenu dans des balises
et ajouter au style width:100%;height:100% par exemple.
Autrement, il faudrait voir le code plus en détail. 🙂
Bonjour,
est il possible de mettre une image en background au lieu d’une couleur unique?
Merci!
Oui bien sûr, on peut aussi arrondir directement les coins d’une image.
Merci à vous.
Bonjour, Bonjour,
Merci bcp de tous ces conseils, j’ai réussi à mettre un joli cadre autour des infos pratiques sur mon blog. Toutefois, j’aimerai aller un peu plus loin. Le cadre que vous proposez.
1) J’aimerai pouvoir écrire à côté du cadre, là il se place automatiquement en dessous ou au-dessus du texte. Est-ce possible ?
2) Si cela n’est pas possible, j’aimerai pouvoir aligner deux ou trois cadres horizontalement et non verticalement.
Merci bcp de votre travail !
Oui, c’est possible mais un peu long à expliquer dans un commentaire.
Pour faire simple, les éléments se place selon le flux.
Les éléments inline se place en ligne et les éléments blocks les uns en dessous des autres
Le cadre (div) est un élément block. il se place automatiquement en dessous du texte.
Pour le placer à côté du texte, on peut mettre le texte dans une div et attribuer le css display:inline-block pour afficher les blocks en ligne tout en conservant les propriété d’un élément block, c-a-d sa hauteur.
Bon, c’est peut-être un peu confus, mais je ferai un article la dessus si vous le souhaitez.
Merci pour votre commentaire.
Philippe