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.

9 Comments

Add a Comment

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
anti moustique android
5 applications android anti-moustiques.

Les vacances c'est bien, mais les moustiques, c'est nul. Pour éloigner ces suceurs de sang, il existe des insecticides dangereux...

clippy_links
Ajouter Clippy l’assistant de Microsoft Office à un site.

Vous vous souvenez de Clippy, Merlin, Rover et Links ? Non ? Il s'agit des petits personnages de l’assistant de...

lien vers ancre dans page
Comment créer des liens vers des ancres dans une page web ?

Vous avez peut-être un jour eu envie de faire un lien vers un point précis de votre article ? Où...

Fermer