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:
- Une grande image qui sera le plan vu à travers la fenêtre.
- Une image servant de masque pour réaliser la fenêtre.
- Une double balise <div> imbriquée.
- Le descripteur CSS pour chacune des balises.
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 tous les navigateurs.
Voir aussi la démo de texte fixe devant une image déroulante.