En jouant sur les règles de superposition des éléments selon leur emplacement dans le code et sur une marge supérieure négative de l'élément le plus bas, on peut parfaitement obtenir un effet d'ombre portée avec des éléments non positionnés.
Nous utilisons deux carrés de 400px de côtés, l'un est gris, l'autre blanc.
Dans le code html, le carré gris (l'ombre) est situé en amont. Dans le navigateur, il a donc un indice de profondeur inférieur aux éléments qui le suivent. Il s'affiche à 210px du bord gauche ( margin-left : 210px).
Dans le code html, le carré blanc (qui crée l'ombre) est situé à l'aval du précédent. Dans le navigateur, il se superpose donc à ce dernier grâce :
Les marges négatives peuvent même être utilisées pour ombrer des textes comme ci-dessous :
Les codes html et css de cet exemple
Les codes html et css de cet exemple
.OmbreTexte{
font-size:40px;
margin-top:20px;
text-align:center;
color:#555;
}
.Texte{
font-size:40px;
text-align:center;
margin-top:-53px;
margin-left:8px;
}
< p class="OmbreTexte"> Les codes html et css de cet exemple</p>
< p class="Texte">Les codes html et css de cet exemple">/p>