CSS: Fenêtre sur un paysage

Sans avoir besoin d'utiliser JavaScript, on voit à travers une fenêtre un paysage ou une image qui reste fixe comme un plan extérieur, alors que la page est déroulée avec l'ascenseur latéral.

La démonstration

Dérouler la page avec l'ascenceur. Si besoin, réduire la fenêtre du navigateur pour faire apparaître un ascenceur vertical et horizontal.

Comment réaliser cet effet

Pour obtenir cet effet, on utilise:

  1. Une grande image qui sera le plan vu à travers la fenêtre.
  2. Une image servant de masque pour réaliser la fenêtre.
  3. Une double balise <div> imbriquée.
  4. Le descripteur CSS pour chacune des balises.

L'image du plan extérieur.

Concevoir le masque

Cela se fait en trois étapes avec un logiciel de dessin capable de remplir une image avec un fond tranparent et disposant de figures géométriques prédéfinies. Dans le cas présent on a utilisé The Gimp et Paint.net.

On suppose que la page est blanche, donc le masque sera rempli en blanc avec un rond transparent.

Création d'une image avec un fond transparent On ajoute un cercle blanc On effectue un remplissage en blanc de l'extérieur au cercle

Les images peuvent être téléchargées pour être vues avec un logiciel de dessin. Ce sont respectivement image1.gif, image2.gif et image3.gif. La troisième est celle qui est utilisée plus haut.

Les balises div

La balise fore aura pour fond le masque et la balise back qui la contient aura pour fond la photo du paysage.

<div class="back">
    <div class="fore></div>
</div>

Le code CSS

La feuille de style définit un descripteur pour la balise fore et back:

.back
{
  background: url(images/sea.jpg) no-repeat fixed 0px 0px;
  width:240px;
  height:240px;
}

La propriété background a pour attributs l'url de la photo du paysage, l'attribut fixed essentiel pour que l'image ne déroule pas quand on déroule la page et les positions de l'image à l'intérieur de la balise back.

.fore
{ 
  background:transparent url(images/image3.gif) no-repeat 0px 0px;
  width:240px; 
  height:240px;
}

La propriété background de fore a pour attributs l'url du masque, l'attribut transparent pour prise en compte de la transparence de l'image, et les positions du masque dans la balise fore.

Compatibilité

Cet effet a été testé avec Internet Explorer 7, Firefox 2, Opera 9 et Safari 1.1.

Voir aussi la démo de texte fixe devant une image déroulante.

© 2008-2012 Xul.fr