shadow - Cours

text-shadow

Le principe

Un texte peut être muni de une ou plusieurs ombres.

#texte {
    text-shadow: 4px 5px 3px #03B8CF;
    color: #000000;
}

Dans l'exemple qui précède, l'ombre du texte de l'élément d'identifiant id="texte" a pour couleur #03B8CF, elle est décalée horizontalement vers la droite de 4 pixels par rapport au texte, verticalement vers le bas de 5 pixels, un adoucissement (ou floutage) de 3 pixels est déclaré.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> text-shadow  </title>
        <style>
            p{ 
                text-shadow: 4px 5px 3px rgb(100,100,100); 
                color: red;
            }
        </style>
    </head>
    <body>
        <p>  Des ombres</p>
    </body>
</html>

Un texte peut être muni de plusieurs ombres, séparées dans la déclaration par une virgule. Dans ce cas, la première déclarée est au-dessus de la seconde, qui est au-dessus de la troisième...

Illustration

L'homme qui tire plus vite que son ombre.

Code css :

box-shadow

Une boîte est munie d'une ombre avec box-shadow.

h2 {
    box-shadow: 10px 8px 5px 4px #044106;
}

Dans cet exemple :

10px est le décalage horizontal de l'ombre (vers la droite en positif, vers la gauche en négatif)
8px est le décalage vertical de l'ombre (vers le bas en positif, vers le haut en négatif)
5px et 4px sont, respectivement, l'adoucissement (floutage) et un renfort de l'ombre.
#044106 est la couleur de l'ombre.

On peut indiquer plusieurs ombres, séparées par des virgules. On peut obtenir de beaux effets avec des ombres, mais la définition des effets réussis demande du travail.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> box-shadow  </title>
        <style>
            h2 {
                box-shadow: 10px 8px 5px 4px #044106;
                width: 300px;
                border: 1px solid brown;
                text-align: center;
                margin-bottom: 2em;
            }
            
            p{
                box-shadow: -10px -8px 5px 4px rgba(200,200,200,0.5);
                border: 1px solid black;
                width: 250px;
                margin-left: 2em;
            }
        </style>
    </head>
    <body>
        <h2> Ombre sur boîte </h2>   
        
        <p>  Ombre sur boîte </p>
    </body>
</html>

Les ombres

text-shadow

Le principe

Illustration

Décalages.

Adoucissement (floutage)

Taille du texte

Interligne

Graisse

Choix des couleurs.

box-shadow