Mettre en valeur un texte en l'encadrant

Hi,

Voici une petite astuce qui pourra vous servir pour agrémenter vos textes.
Pour cette astuce il faut que le HTML soit activé sur le forum et dans le profil

Premièrement il faut créer une class que l'on va nommer encadrement

Ensuite pour la décoration on va jouer sur :
- Une couleur de fond (background)
- Une épaisseur pour la bordure du cadre (border)
- On défini comment est ce cadre et de quelle couleur*
- On ajoute des coins arrondis à ce cadre (border-radius)
- On joue sur l'espace entre le texte et le cadre (padding)

Direction la feuille de style CSS

Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS


Mettre ce code :

Code:

p.encadrement {
background:#dbe0ef;
border:1px dotted black;
border-radius: 5px;
padding:10px;
}

Pour encadrer votre texte il faut l'écrire entre des balises :

Code:

<p class="encadrement">[b]Le passage de Lorem Ipsum standard, utilisé depuis 1500[/b]
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

Ce qui donnera à l'écran :

Le passage de Lorem Ipsum standard, utilisé depuis 1500
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

*Cette ligne de code :

Code:

border:1px dotted black;

Elle définie que le cadre à une bordure de 1px, qu'il est en pointillé et de couleur noire

Style de bordures :
Huit styles sont possibles :

- dotted (pointillé)
- dashed (tirets)
- solid (solide)
- double (double)
- groove (rainurée)
- ridge (relief)
- inset (relief intérieur)
- outset (relief extérieur)

À bientôt

Trop joli. Merci Splash.