28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerais savoir si c'est possible de réaliser en CSS une page dont le background apparaît progressivement au chargement de la page.

Comme ici : http://www.olympe.in

Aussi, est-il possible que lorsqu'on clique sur un lien, un élément apparaisse à ce moment là ?

Merci

Raphaël
Salut,
J'avais ça sur mon site il y a un moment, il te suffit de faire une animation en css3 qui change l'opacité.

A+
Merci pour vos réponses, mais mes connaissances se limitent au CSS, je ne connais pas grand chose du Javascript. Loin de moi l'idée de vous demander de le faire pour moi, où pourrais-je trouver des tuto pour apprendre les bases et réaliser au moins cet arrière-plan qui apparaît progressivement.

Merci

Raphaël
En CSS pure, ce que tu tentes de produire n'est pas possible sans faire appel à des choses très avancées et peu supportées que sont :

- la propriété CSS3 background-size
- les animations CSS3

Ce ne sont pas des techniques à mettre entre les mains d'un débutant car elles posent des soucis d'interopérabilité et de performances.

Essaie de voir si tu ne peux pas implémenter SuperSized dont l'installation est simple et très bien expliquée.
Merci pour vos réponses, j'ai finalement utilisé une astuce toute simple en CSS :

Sur ma page d'accueil, le fond apparaît lorsque la souris se trouve sur la page, ce qui est intuitif pour tout le monde, j'utilise donc html:hover pour faire apparaître progressivement mon image. Ensuite, je met un délai très long pour ne pas qu'elle disparaisse à la moindre sortie du pointeur.

Mais j'avais une autre question. Comment faire pour qu'un bloc de texte apparaisse lorsqu'on clique sur un lien ? Par exemple, un titre et lorsqu'on clique dessus, un paragraphe apparaît juste en dessous. J'avais déjà vu ça quelque part...

Merci

Raphaël
Tu as détourné l'utilisation des transitions, très futé (bien qu'incompatible avec les navigateurs anciens) !

Pour faire apparaitre un bloc de texte, en css c'est possible avec :target mais encore une fois ça ne passera pas sous tous les navigateurs.

JavaScript est plutôt recommandé pour ce type de chose.