WayToLearnX » Développement Web » CSS » Comment ajouter l’ombre aux éléments HTML en CSS

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

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

juillet 12, 2019février 10, 2020 Amine KOUIS Aucun commentaire box shadow, css ombrage

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.

QCMs qui pourraient vous intéresser :

Laisser un commentaire Annuler la réponse