7.1 Propriété text-decoration
CSS offre différentes propriétés pour styliser et décorer le texte sur les pages web. Les propriétés text-decoration,
text-transform et text-shadow permettent d'ajouter un soulignement, de changer la casse du texte et de créer des ombres, ce qui aide à rendre le texte plus expressif et attrayant.
La propriété text-decoration contrôle les effets décoratifs du texte, tels que le soulignement, le surlignement et
le biffage. Elle permet également de définir la couleur et le style des lignes utilisées pour décorer le texte.
Valeurs :
none: supprime toutes les décorations de texteunderline: souligne le texteoverline: ajoute une ligne au-dessus du texteline-through: ajoute une ligne à travers le texte (biffage)blink: le texte clignote (pas supporté par tous les navigateurs)text-decoration-color: définit la couleur de la ligne de décorationtext-decoration-style: définit le style de la ligne (solid, double, dotted, dashed, wavy)text-decoration-thickness: définit l'épaisseur de la ligne de décoration
Exemple d'utilisation :
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Ce texte est souligné.</p>
<p class="overline">Ce texte est surligné.</p>
<p class="line-through">Ce texte est barré.</p>
<p class="custom-decoration">Ce texte est souligné par une ligne ondulée rouge.</p>
</body>
7.2 Propriété text-transform
La propriété text-transform contrôle la transformation du texte en modifiant la casse des lettres. C'est utile
pour changer automatiquement le texte en majuscules, en minuscules, etc.
Valeurs :
none: pas de transformation (valeur par défaut)capitalize: la première lettre de chaque mot est en majusculeuppercase: toutes les lettres sont en majusculeslowercase: toutes les lettres sont en minusculesfull-width: transforme le texte en pleine largeur (pas supporté par tous les navigateurs)
Exemple d'utilisation :
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">ce texte aura une majuscule pour chaque mot.</p>
<p class="uppercase">ce texte sera entièrement en majuscules.</p>
<p class="lowercase">CE TEXTE SERA ENTIÈREMENT EN MINUSCULES.</p>
</body>
7.3 Propriété text-shadow
La propriété text-shadow ajoute une ombre au texte, ce qui permet de créer des effets visuels
et d'améliorer la lisibilité du texte sur une page web.
Valeurs :
<offset-x>: décalage de l'ombre sur l'axe X (horizontalement)<offset-y>: décalage de l'ombre sur l'axe Y (verticalement)<blur-radius>: rayon de flou de l'ombre (facultatif)<color>: couleur de l'ombre (facultatif)
Exemple d'utilisation :
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Ce texte a une ombre.</p>
<p class="multiple-shadows">Ce texte a plusieurs ombres.</p>
</body>
Explication du code :
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: ajoute une ombre avec un décalage horizontal de 2px, un décalage vertical de 3px, un rayon de flou de 4px et une couleur noire semi-transparentetext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: ajoute deux ombres avec différents paramètres, créant un effet visuel plus complexe
GO TO FULL VERSION