WebPetit

La propriété CSS box-shadow permet d’appliquer un effet d’ombre aux éléments sur lesquels elle s’applique.

#mon_identifiant {
box-shadow:10px 10px 10px black;
}

Elle permet de mettre l’ombre à un bloc d’élément.
Elles prends trois valeurs en pixel(px), pourcentage(%), point(pt), ou em , qui représente l’ombre appliqué.
La première valeur gère le déplacement de l’ombre a droite, la deuxième gère le déplacement de l’ombre en bas, et la troisième permet de gérer le contour de l’ombre.
Ces valeurs sont suivies de la couleur de l’ombre en anglais(yellow, black,…), en héxadecimale, ou en rvb(oy rgb).

Exemple

Ces exemples seront appliqués au code html ci dessous:

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

1^er exemple :

CSS

p{
background-color:chocolate;
width:400px;
height:150px;
-moz-box-shadow:10px 10px black;
-webkit-box-shadow:10px 10px black;
box-shadow:10px 10px black;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

2^ème exemple

CSS

p{
background-color:chocolate;
width:400px;
height:150px;
-moz-box-shadow:10px 10px 10px black;
-webkit-box-shadow:10px 10px 10px black;
box-shadow:10px 10px 10px black;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

---