Mais comment font ils ????? (Zen Garden)

[patator]

Bonsoir
En faisant une recherche, je suis "tombé" sur ça :
http://www.csszengarden.com/?cssfile=ht ... attack.css
Mais comment ils font, c'est fait avec quoi le truc de la lame qui découpe la feuille en descendant et qui se referme en remontant.
Juste par curiosité.
J'avais jamais vu un truc pareil.

[jv2759]

j'ai pas regarder le source, mais je pense un png sur fond transparant... et superposition d'image...

[Express]

Sympa le style, moi j'aime bien ....... 8)

[chBok]

J'ai regardé, il s'agit de positionnement d'images en position FIXED (pour le couteau) et ABSOLUTE pour le gars, et le crane. Les images PNG ont bien entendu de la transparence.

La version IE ne propose pas le même rendu...

[calimo]

Génial ! 8)

Ils mettent un PNG transparent en background et en position fixe, en avant-plan. Idem pour la "cassure" et tout le reste. Ce sont des fonds de blocs supplémentaires (au passage je n'avais jamais remarqué qu'il y en avais dans le code de ZenGarden... c'est presque décevant).
Le reste n'est pas positionné et défile normalement.

Remarques :
-l'auteur a pris l'option de faire du code invalide. Dommage, ça aurait pas été difficile pourtant
-le png est transparent sous IE
-sous Opera, l'arrivée de la lame et l'ouverture se fait dans un ordre plus logique

En tous cas, c'est du 100% CSS, c'est vraiment la classe 8)

[jv2759]

-le png est transparent sous IE

C'est l'opaciter qu'il ne gére pas... la transparance à la gif marche...

[SB]

Très zen.

[HP]

La version IE ne propose pas le même rendu...

chez moi avec IE on a surtout pas d'animation ...
le reste, je me suis pas trop attardé à voir comment ça se passait avec ce navigateur antédiluvien.

[calimo]

Ben non c'est normal, IE ne supporte pas la position fixe

[Benoit]

Ce sont des fonds de blocs supplémentaires (au passage je n'avais jamais remarqué qu'il y en avais dans le code de ZenGarden... c'est presque décevant).

C'est expliqué dans la FAQ que c'est fait volontairement pour augmenter les possibilités, et que dans la réalité on n'en mettrait jamais autant... enfin on ne devrait jamais en mettre autant

-le png est transparent sous IE

L'astuce est connue (utilisant les filtres propriétaires MS) et se retrouve notamment dans l'add-on IE7.