<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0% ; padding:0%} /* Marges intérieures et extérieures
de la page */
.dragon { /* boite affichant l'image du dragon */
position:absolute ; /* la boie est en position absolue */
top:13% ; /* à 13% du haut de la boite parent (ici la
page) */
left:0%} /* et à 0% de la gauche */
.boite { /* boite centrale affichant une couleur de fond */
position:absolute ; /* celle-ci est en position absolue */
top:10% ; /* à 10% du haut de la boite parent (ici la
page) */
left:25% ; /* et à 25% de la gauche */
padding:0% ; /* marge intérieure */
margin:0% ; /* marge extérieure */
width:50% ; /* largeur 50% de la boite parent (ici la page) */
border:1px solid black ; /* bordure de la boite */
height:200% ; /* hauteur de la boite par rapport à la boite
parent (ici la page) */
background-color: #FEE9DE} /* couleur du fond de la boite */
.dragon-transparence { /* boite contenant l'aile modifiée */
position:absolute ; /* celle-ci est en position absolue */
top:10% ; /* à 10% du haut de la boite parent (ici la page)
*/
left:25% ; /* et à 25% de la gauche */
padding:0% ; /* marge intérieure */
margin:0%} /* marge extérieure */
.boite2 { /* boite pour écrire le texte */
position:absolute ; /* celle-ci est en position absolue */
top:10% ; /* à 10% du haut de la boite parent (ici la page)
*/
left:25% ; /* et à 25% de la gauche */
padding:0% ; /* marge intérieure */
margin:0% ; /* marge extérieure */
width:50% ; /* largeur 50% de la boite parent (ici la page) */
border:1px solid black ; /* bordure de la boite */
height:200%}/* hauteur de la boite par rapport à la boite
parent (ici la page) */
</style>
</head>
<body>
<img class="dragon" src="dragon2.gif" width="49%" height="49%"> <!-- affichage du dragon -->
<div class="boite"></div> <!-- affichage de la boite avec un fond de couleur -->
<img class="dragon-transparence" src="dragon-transparence.gif" width="25%" height="54%"> <!-- affichage de l'aile -->
<div class="boite2"> <!-- affichage de la boite contenant
le texte -->
<p>Texte quelconque</p>
<p>Texte quelconque</p>
<p>Texte quelconque</p>
<p>Texte quelconque</p>
</div>
</body>
</html>
COMMENTAIRES
Le script ci-joint vise à résoudre une insuffisance des CSS : on ne peut pas définir une couleur transparente. La couleur de fond d'une boite couvre à 100% ce qui se trouve en-dessous.
La solution proposée ici est assez lourde, et elle n'a pas ma préférence.
Elle est quand même citée pour 3 raisons :
- pour mémoire,
- parcequ'elle permet d'obtenir un effet de déformation comme celui du site complexspiral. Il est quand même à noter que l'effet de déformation montré sur ce site peut-être également obtenu en modifiant l'image originale, et en ne conservant qu'une seule image du dragon complet, avec son aile modifiée. Cette image sera alors gérée en vrai transparence, dans le cadre des exemples 2 et 3,
- parcequ'elle permet de voir un exemple de superposition de calque (ou boites, ou couches, ou layers).
Voyons le principe du script ci-contre.
Il est basé sur 4 boites en position:absolute.
- La 1er est l'image du dragon.
- Elle est partiellement recouverte par une boite au fond violet clair, qui cache intégralement l'aile.
- On recouvre avec une 3ième couche, laquelle comprend un bout d'aîle, retraité sous photoshop pour avoir une apparence atténuée (comme recouverte par un verre partiellement transparent).
- On met enfin une 4ième couche, qui est strictement identique à la boite 2, mais sans couleur de fond. Ce qui est dessous reste donc visible. C'est dans cette 4ième boite qu'on écrira le texte.
Les 4 boites se recouvrent l'une l'autre (dans l'ordre d'écriture dans la partie HTML du code), et créent l'effet désiré. On voit qu'il n'y a aucune transparence réelle sur l'aile, mais seulement une apparence de transparence.
On peut aussi gérer l'ordre d'affichage des 4 couches en jouant sur la fonction z-index (ici ce n'est pas nécessaire). Pour en savoir plus sur celle-ci.
Pour télécharger les 2 images : dragon | aile
Marche avec IE 5.0 et plus, avec les navigateurs Gecko (Netscape 6 et +, Mozilla,...) ou Opéra. Ne marche pas avec Netscape 4.
Un autre exemple