Maison > Article > interface Web > Comment appliquer un effet d'ombre sur du texte en utilisant CSS ?
Comment appliquer un effet d'ombre sur du texte en utilisant CSS ?
- 王林avant
- 2023-08-23 23:17:091115parcourir
Nous pouvons appliquer des effets d'ombre sur des éléments de texte en utilisant la propriété "text-shadow" fournie par CSS. La propriété "text-shadow" accepte une liste de valeurs représentant le décalage X et Y de l'ombre par rapport à l'élément, le rayon de flou de l'ombre et la couleur de l'ombre. Les valeurs sont répertoriées dans la syntaxe ci-dessous -
Grammaire
text-shadow: offset_y offset_x blur-radius color
Voici une liste de valeurs et leurs significations -
Offset-x - Il représente la distance de l'ombre à l'élément dans la direction horizontale
Offset-y - Il représente la distance de l'ombre à l'élément dans la direction verticale
Blur Radius − Il représente l'opacité de l'ombre
Couleur − Elle représente la couleur de l'ombre
Exemple 1
Dans cet exemple nous allons appliquer un effet d'ombre sur un élément "h3" et donner à l'ombre un décalage y ainsi qu'une couleur rouge
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Apply Shadow Effect on Text Using CSS?</title>
<style>
h3 {
text-shadow: 0 15px 0 red;
}
</style>
</head>
<body>
<h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>
Exemple 2
Dans cet exemple, nous appliquerons un effet d'ombre sur un élément "h3" et donnerons à l'ombre un décalage y, un décalage x, une transparence et une couleur verte.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Apply Shadow Effect on Text Using CSS?</title>
<style>
h3 {
text-shadow: 10px 15px 5px green;
}
</style>
</head>
<body>
<h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>
Conclusion
Dans cet article, nous avons découvert la propriété « text-shadow » et appliqué des effets d'ombre aux éléments de texte à l'aide de CSS, démontrés à travers 2 exemples différents. Dans le premier exemple, nous avons appliqué un effet d'ombre vertical avec la couleur "rouge", tandis que dans le deuxième exemple, nous avons appliqué un effet d'ombre vertical et horizontal avec la couleur "vert" et un rayon de flou de 5px.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!