Comment ajouter l’ombre sur un texte en CSS

Vous pouvez utiliser la propriété CSS text-shadow pour appliquer l’effet d’ombrage (comme le style d’ombrage sur Photoshop) aux éléments de texte. Vous pouvez également appliquer plus d’une ombre en fournissant une liste de valeurs séparées par des virgules.
 
 

Exemple 1 :
<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {
		  text-shadow: 2px 2px blue;
		}
		</style>
	</head>
	<body>
		<h1>Lorem ipsum dolor sit amet.</h1>
	</body>
</html>
Résultat

Lorem ipsum dolor sit amet.

 

Exemple 2 :
<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {
		  text-shadow: 2px 2px 8px blue;
		}
		</style>
	</head>
	<body>
		<h1>Lorem ipsum dolor sit amet.</h1>
	</body>
</html>
Résultat

Lorem ipsum dolor sit amet.

 

Exemple 3 :
<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {
		  color: white;
		  text-shadow: 2px 2px 4px #000000;
		}
		</style>
	</head>
	<body>
		<h1>Lorem ipsum dolor sit amet.</h1>
	</body>
</html>
Résultat

Lorem ipsum dolor sit amet.

 

Exemple 4 :
<!DOCTYPE html>
<html>
	<head>
		<style>
		h1 {
		  text-shadow: 0 0 3px blue, 0 0 5px green;
		}
		</style>
	</head>
	<body>
		<h1>Lorem ipsum dolor sit amet.</h1>
	</body>
</html>
Résultat

Lorem ipsum dolor sit amet.

 

Partagez cet article

2 réflexions sur “Comment ajouter l’ombre sur un texte en CSS

  • Avatar
    septembre 21, 2019 à 4:45
    Permalien

    Article simple et précis! On peut faire bcp de choses sympas avec test-shadow, il existe également plusieurs outils sur le net permettant de générer le css (celui-ci par exemple) 🙂

    Répondre

Laisser un commentaire

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