Un effet de transparence
By Geoffrey on Friday 7 May 2004, 15:40 - Coding - Permalink
Bon voilà, puisque ça interresse au moins une personne, je vais vous expliquer rapidement comment j'ai obtenu l'effet de transparence.
Il ne s'agit pas d'une propriété CSS permettant la transparence comme je l'ai cru moi aussi au premier abord en regardant la Spirale Complexe d'Eric Meyer. La méthode est beaucoup plus grossière, tout se joue en fait sur l'image. L'image de fond a été modifié (avec The GIMP dans mon cas) pour lui ajouter un layer qui recouvre la partie droite. Ce layer est blanc, avec un certain pourcentage de transparence (je ne me souviens pas exactement combien j'ai mis exactement mais peu importe), ce qui donne l'effet de transparence. L'image est ensuite exportée (en jpg présentement) puis utilisée comme fond pour body, avec un attribut background-attachmentfixed. Et voilà le tour est joué :) Il ne reste plus qu'a positioner le texte à l'endroit adéquat, c'est à dire sur la partie soit-disant transparente de l'image.
Ceci dit, alors que je n'utilise qu'une image pour mon effet, Eric meyer en utilise deux, pourquoi ? Je ne sais pas trop, mais il y a surement une bonne raison :)
Il est possible de faire des choses bien plus évolués, mais pour ça, je vous conseille, encore une fois, de vous reporter à la démo Complex Spiral d'Eric Meyer.
Comments
Salut Hypothèse : pour accélérer le chargement?
Aucune garantie :)
@+
beh, non je pense pas puisque du coup ça fait deux images à charger au lieu d'une :\
Pourtant il me semblait avoir lu quelque part que dans certaines conditions il vallait mieux charger 2 petites images qu'un grande... c'était plus rapide.
oui mais non. Eric meyer n'utilise pas 2 petites images. J'avais pensé au début aussi a séparer la partie de droite et la partie de gauche, mais sur Complex Spiral, les 2 images sont les mêmes, l'une avec un calque transparent, l'autre non. Donc voilà, je ne comprends pas très bien :\
C'est sûr que là j'étais à côté de la plaque :)
Salut, C'est mon premier essai de tracback! :-) soyez donc indulgents si je me plante!! *:-p
Parce que comme ça, il peut placer son texte n'importe comment dans la css et il aura toujours le bon bout de l'image "transparente" en dessous et l'autre bout de l'autre image a coté.
l'achtuce de la mort qui tue !!
Bah ça semblait pas mal, mais sous mon firefox favori...
Une fois ouvert sous IE, c'est la catastrophe!
La méthode simpliste que j'ai trouvé ne fonctionne pas entièrement...
J'aime bien ton blog !