En utilisant les propriétés de positionnement comme top, left, right, bottom, ainsi que position avec deux de ses valeurs, en l'occurrence relative et absolute, il est possible de réaliser des effets divers sur des éléments HTML tel que du texte ou encore des images.

LE DILETTANTE

<style>
  A.exp {text-decoration: none; color:green;}
  .lien {positon:relative}
  .lumiere {top:-1; left:-1; color:white}
  .ombre {top:+1; left:+1; color:pink}
  .original {top:0; left:0; color:red} 
</style>

<div class="lien">
  <div class="lumiere" align="center">
    <h1><I>LE DILETTANTE</I></h1>
  </div>
  <div class="ombre" align="center">
    <h1><I>LE DILETTANTE</I></h1>
  </div>
  <div class="original" align="center">
    <a class="exp" href="index.htm">
      <h1><I>LE DILETTANTE</I></h1>
    </a>
  </div>
</div>

LE DILETTANTE

<style>
  .ombre1 { top:+5; left:+5; color:black}
  .original1 { top:0; left:0; color:red}
</style>

<div class=Exemple1>
  <div class="ombre1" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="original1" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
</div>

LE DILETTANTE

<style>
  .lumiere2 {top:-1; left:-2; color:white}
  .ombre2 {top:+1; left:+2; color:black}
  .original2 {top:0; left:0; color: rgb(213, 222, 204)} 
</style>

<div class=Exemple2>
  <div class="lumiere2" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="ombre2" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="original2" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
</div>

LE DILETTANTE

<style>
  .lumiere3 {top:-2; left:-2; color:white}
  .ombre3 {top:+2; left:+2; color:lightblue}
  .original3 {top:0; left:0; color:blue} 
</style>

<div class=Exemple3>
  <div class="lumiere3" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="ombre3" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="original3" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
</div>

LE DILETTANTE

<style>
  .lumiere4 {top:-2; left:-2; color:yellow}
  .ombre4 {top:+2; left:+2; color:yellow}
  .ombre42 {top:+2; left:-2; color:yellow}
  .ombre43 {top:-2; left:+2; color:yellow}
  .original4 {top:0; left:0; color:darkgreen} 
</style>

<div class=Exemple4>
  <div class="lumiere4" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="ombre4" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="ombre42" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="ombre43" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="original4" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
</div>

LE DILETTANTE

<style>
  .lumiere5 {top:1; left:1; color:lime}
  .ombre5 {top:-3; left:-3; color:gray}
  .original5 {top:0; left:0; color:green} 
</style>

<div class=Exemple5>
  <div class="lumiere5" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="ombre5" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
  <div class="original5" align="center">
    <h1>LE DILETTANTE</h1>
  </div>
</div>

L'Organisation Mondiale du Commerce créée en 1995 en remplacement du GATT, a laissé apparaître de profonds désaccords entre l'Union européenne et les États-Unis d'Amérique. À Seattle, la troisième conférence de l'OMC a entraîné dans son sillage des débordements et a exacerbé la polémique autour de la mondialisation.

<style>
  div {font-size: 20pt}
  .lumiere6 {top:1; left:1; color:white}
  .ombre6 {top:-1; left:-1; color:black}
  .original6 {top:0; left:0; color:purple} 
</style>

<div class=Exemple6>
  <div class="lumiere6" align="center">
    <p> ... </p>
  </div>
  <div class="ombre6" align="center">
    <p> ... </p>
  </div>
  <div class="original6" align="center">
    <p> ... </p>
  </div>
</div>

<style>
  .ombre7 {position: relative;  top:51%; left:51%;  background-color: rgb(146, 152, 154)}
  .original7 {position: relative;       top:50%; left:50%} 
</style>

<div class=Exemple7>
  <div>
    <img class="ombre7" 
          src="images/fond.jpg" 
          border="0" width="200" height="150">
  </div>
  <div>
    <img class="original7" 
          src="images/tempete.jpg" 
          border="0" width="200" height="150">
  </div>
</div>