OMBRAGE SUR UNE BOITE CSS

Exemple

CODE SOURCE CSS ET HTML

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
.ombre { /* boite d'arrière plan dont le débordement crée l'ombrage */
width:200px ; /* largeur de la boite, en pixels */
height:200px ; /* hauteur de la boite, en pixels */
background-color:black } /* couleur de la boite, donc de l'ombre */

.boite { /* boite principale */
width:200px ; /* largeur de la boite, en pixels */
height:200px ; /* hauteur de la boite, en pixels */
background-color:white ; /* couleur de la boite */
border: solid 2px black ; /* style de la bordure de la boite */
position:relative ; /* indique un décalage par rapport à la position normale */
top:-7px ; /* décalage de 7 pixels vers le haut */
left:-7px} /* décalage de 7 pixels vers la gauche */

</style>
</head>

<body>

<div class="ombre"> <!-- début boite d'ombrage -->
<div class="boite"></div> <!-- boite blanche vide -->
</div> <!-- fin boite d'ombrage -->

</body>
</html>

Pour tester ce script

 

COMMENTAIRES

Il s'agit de créer une ombre. Le principe est très simple.
On crée 2 boites identiques, mais de couleurs différentes.
L'une des 2, au choix, servira d'ombre. Pour cela elle doit être cachée derrière la 1er, en débordant un peu vers le bas et la droite.

Dans le code HTML, la boite d'ombrage doit encadrer la boite principale.

Ne marche pas dans Netscape 4.