Effets d'ombre CSS

Table des matières

Afficher la table des matières

Shadows

With CSS you can create shadow effects!

Hover over me!

Effets d'ombre CSS

Avec CSS, vous pouvez ajouter une ombre au texte et aux éléments.

Dans ces chapitres, vous découvrirez les propriétés suivantes :

text-shadow
box-shadow

Ombre de texte CSS

La propriété CSS text-shadow applique une ombre au texte.

Dans son utilisation la plus simple, vous spécifiez uniquement l'ombre horizontale (2px) et l'ombre verticale (2px) :

Text shadow effect!

Exemple

  h1
{
  text-shadow: 2px 2px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Ensuite, ajoutez une couleur à l'ombre :

Text shadow effect!

Exemple

  h1
{
  text-shadow: 2px 2px red;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Ensuite, ajoutez un effet de flou à l'ombre :

Text shadow effect!

Exemple

   h1
{
  text-shadow: 2px 2px 5px red;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

L'exemple suivant montre un texte blanc avec une ombre noire :

Text shadow effect!

Exemple

   h1
{
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

L'exemple suivant montre une ombre rougeoyante au néon :

Text shadow effect!

Exemple

  h1
{
  text-shadow: 0 0 3px #FF0000;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>Text-shadow with red neon glow!</h1>

</body>
</html>

Plusieurs ombres

Pour ajouter plusieurs ombres au texte, vous pouvez ajouter une liste d’ombres séparées par des virgules.

L'exemple suivant montre une ombre lumineuse au néon rouge et bleue :

Text shadow effect!

Exemple

   h1
{
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Text-shadow with red and blue neon glow!</h1>

</body>
</html>

L'exemple suivant montre un texte blanc avec une ombre noire, bleue et bleu foncé :

Text shadow effect!

Exemple

   h1
{
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Vous pouvez également utiliser la propriété text-shadow pour créer une bordure simple autour du texte (sans ombres) :

Border around text!

Exemple

   h1
{
  color: coral;
  text-shadow: -1px 0 black, 0 1px 
    black, 1px 0 black, 0 -1px black;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>

<h1>Border around text!</h1>

</body>
</html>