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.

 

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

  • septembre 21, 2019 à 4:45 pm
    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
    • septembre 21, 2019 à 7:15 pm
      Permalien

      Merci pour ce super outil facile 🙂

      Répondre

Laisser un commentaire

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