Discussion :

[olivierdauxais]

Bonjour,

Je pourrais mettre l'image jointe en fond d'écran mais elle alourdira considérablement ma page.
J'aimerais garder une page aussi petite que possible. De plus, cela reste une image statique.
J'aimerai cette vue de la surface de l'eau comme arrière plan mais, en plus, animée comme une véritable eau dans une piscine.

Est-il possible avec CSS3 de générer une telle image (ou une ressemblance) seulement avec du code et sans apport d'image?

Comment faire? Avez-vous une idée?

Cordialement.

[Invité]

Bonjour,

1/ utilise une image GIF (animée).

2/ (éventuellement) adapte la taille (images gif de différentes dimensions) avec les media queries

[olivierdauxais]

Bonjour cher dalmatien,

Je dis dans mon post que je souhaite éviter l'apport d'une image et la première chose que tu me dis est d'utiliser une image gif !!!

N'y a t'il vraiment pas d'autres moyens en CSS3 avec les gradients et autres fonctions avancées de CSS3 ???
Pour faire une sorte de fond d'écran animé un peu comme les dessins animés modernes qui sont 100% en image de synthèse.

[Tsilefy]

En CSS seul, ça m'étonnerait.

Avec Canvas ou WebGL, oui. Par exemple: jQuery Ripples.

[olivierdauxais]

Merci Tsilefy,
Je viens de jeter un œil à ton lien. Oui, c'est ce genre d'effet que je cherche.
Je vais voir cela de plus près dés que j'ai un peu de temps libre.

Mais, juste une petite question rapide:

Je suppose que cet effet fonctionnera parce qu'il y aura dans mon site un lien vers j-query. Serait-ce exact?

Si oui, malheureusement, cela risque d'alourdir et/ou ralentir ma page que je souhaite rapide.
J'aime bien aussi mon autonomie et ne pas faire appel à toutes sortes de sites à droite et à gauche qui sont autant de sources possibles d'infiltration de virus... etc...

Alors, y auraient-ils d'autres solutions qui me permettraient de rester "autonome" et léger sans gif animé et lourd ???

[NoSmoking]

Bonjour,
dans le même ordre d'idée, donc pas CSS pur, il existe HTML5 Water Ripples Demo, qui nécessite une image de fond.