Ombre de la boîte CSS


Table des matières

    Afficher la table des matières


Propriété CSS box-shadow

La propriété CSS box-shadow est utilisée pour appliquer une ou plusieurs ombres sur un élément.


Spécifier une ombre horizontale et verticale

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.

A <div> element with a box-shadow

Exemple

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>



Spécifier une couleur pour l'ombre

Le paramètre color définit la couleur de l'ombre.

A <div> element with a lightblue box-shadow

Exemple

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>



Ajouter un effet de flou à l'ombre

Le paramètre flou définit le rayon de flou. Plus le chiffre est élevé, plus l’ombre sera floue.

A <div> element with a 5px blurred, lightblue box-shadow

Exemple

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>



Définir le rayon de propagation de l'ombre

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.

A <div> element with a blurred, lightblue box-shadow, with a spread radius of 12px

Exemple

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>




Définir le paramètre d'encart

Le paramètre inset change l'ombre d'une ombre extérieure (début) en une ombre intérieure.

A <div> element with a blurred, lightblue, inset box-shadow

Exemple

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>



Ajouter plusieurs ombres

Un élément peut également avoir plusieurs ombres :

Exemple

   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>



Cartes

Vous pouvez également utiliser la propriété box-shadow pour créer des cartes de type papier :

1

January 1, 2021

Norway

Hardanger, Norway

Exemple

  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>




Propriétés de l'ombre CSS

Le tableau suivant répertorie les propriétés CSS shadow :

box-shadow

Ajoute une ou plusieurs ombres à un élément

text-shadow

Ajoute une ou plusieurs ombres à un texte