La propriété CSS box-shadow
est utilisée pour appliquer une ou plusieurs ombres sur un élément.
Dans son utilisation la plus simple, vous spécifiez uniquement une ombre horizontale et verticale. La couleur par défaut de l'ombre est la couleur actuelle du texte.
Spécifiez une ombre horizontale et verticale :
div
{
box-shadow: 10px 10px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>
Le paramètre color
définit la couleur de l'ombre.
Spécifiez une couleur pour l'ombre :
div
{
box-shadow: 10px 10px lightblue;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a lightblue box-shadow</div>
</body>
</html>
Le paramètre flou
définit le rayon de flou. Plus le chiffre est élevé, plus l’ombre sera floue.
Ajoutez un effet de flou à l'ombre :
div
{
box-shadow: 10px 10px 5px lightblue;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a 5px blurred, lightblue box-shadow.</div>
</body>
</html>
Le paramètre spread
définit le rayon de propagation. Une valeur positive augmente la taille de l'ombre, une valeur négative la diminue.
Définissez le rayon de propagation de l'ombre :
div
{
box-shadow: 10px 10px 5px 12px lightblue;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px.</div>
</body>
</html>
Le paramètre inset
change l'ombre d'une ombre extérieure (début) en une ombre intérieure.
Ajoutez le paramètre inset :
div
{
box-shadow: 10px 10px 5px lightblue inset;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a blurred, lightblue, inset box-shadow.</div>
</body>
</html>
Un élément peut également avoir plusieurs ombres :
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
margin: 20px;
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
<div id="example1">
<h2>Multiple shadows</h2>
<p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>
<div id="example2">
<h2>Multiple shadows with blur effect</h2>
<p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>
</body>
</html>
Vous pouvez également utiliser la propriété box-shadow
pour créer des cartes de type papier :
January 1, 2021
Hardanger, Norway
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Essayez-le (Carte texte) →
<!DOCTYPE html>
<html>
<head>
<style>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h1>Create Cards</h1>
<p>The box-shadow property can be used to create paper-like cards:</p>
<div class="card">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2021</p>
</div>
</div>
</body>
</html>
Essayez-le (Carte Image) →
<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h1>Create Polaroid Images</h1>
<p>The box-shadow property can be used to create polaroid images:</p>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Hardanger, Norway</p>
</div>
</div>
</body>
</html>
Le tableau suivant répertorie les propriétés CSS shadow :
Ajoute une ou plusieurs ombres à un élément
Ajoute une ou plusieurs ombres à un texte