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.

cadre css

  • 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>
Mon texte

 

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>
Mon texte

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 :

Mon texte

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 excellent pour une première approche.

Les recherches qui vous ont mené ici

  • encadrer un texte html (4)
  • html cadre autour dun texte (4)
  • html encadrer texte (4)
Ces articles pourraient vous intéresser :
9 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
police-de-caracteres
Comment insérer une police de caractère avec Google Fonts ?

Grâce à Google Web Fonts, il est possible d'utiliser un très grand nombre de polices de caractères sur blog. Certaines...

backlinks
Les 4 meilleurs sites pour connaître et suivre l’évolution des backlinks.

Avoir une vue d'ensemble des backlinks d'un site et connaître leur évolution au cours du temps, est indispensable pour le SEO...

chat_outils_web_ascii
Le code ascii, les caractères spéciaux et le ascii art

Le code ASCII vous connaissez ? Pourtant c'est très utile et même parfois très joli. Au sommaire : 1. Qu'est-ce...

Fermer