Comment ajouter l’ombre aux éléments HTML en CSS

Vous pouvez utiliser la propriété CSS box-shadow pour appliquer l’effet d’ombrage (comme le style d’ombrage sur Photoshop) sur des éléments HTML.
 
 

Exemple 1 :
<!DOCTYPE html>
<html>
	<head>
	<title>Ajouter l'ombre aux éléments HTML en CSS</title>
	<style> 
		.box {
		  border: 1px solid;
		  padding: 10px;
		  box-shadow: 5px 10px #888888;
		}
	</style>
	</head>
	<body>
		<div class="box">
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</body>
</html>
Résultat
Ajouter l'ombre aux éléments HTML en CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Exemple 2 :
<!DOCTYPE html>
<html>
	<head>
	<title>Ajouter l'ombre aux éléments HTML en CSS</title>
	<style> 
		.box {
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 10px 20px #888888;
		}
	</style>
	</head>
	<body>
		<div class="box">
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</body>
</html>
Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Exemple 3 :
<!DOCTYPE html>
<html>
	<head>
	<title>Ajouter l'ombre aux éléments HTML en CSS</title>
	<style> 
		.box {
      border: 1px solid;
      padding: 10px;
      box-shadow: 5px 10px 20px #888 inset;
		}
	</style>
	</head>
	<body>
		<div class="box">
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</body>
</html>
Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Partagez cet article

Laisser un commentaire

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