Niveau Niveau expert

Slideshow en CSS3

Tutorielcss

Publié par le , mis à jour le (34116 lectures)
css xhtml target css3 transitions keyframes slideshow

Sommaire


Améliorations, discussion et suggestions

Quelques améliorations ?

Ce que je vous ai proposé n'est qu'un travail sur des fonctionnalités de CSS3 encore en travaux. Il est donc fort probable que certains points changent du côté du W3C, ou même du côté des implémentations (d'ailleurs j'ai eu un petit souci lors d'un test sous la dernière version d'Opera, actuellement la 10.60).

Quelques suggestions soulevées

  • Sur le système de slideshow avec contrôle au clic, il serait sympa de pouvoir passer de la première image à la dernière, et inversement. C'est relativement simple à ajouter,
  • Toujours sur ce même slideshow, dès qu'on dépasse 3 éléments à visualiser on pourrait ajouter des petites pastilles en pied d'élément pour passer du 3ème au 5ème directement, par exemple,
  • Sur les effets de transition, pour les deux slideshow, il serait intéressant de tester plusieurs autres effets que le simple mouvement, cela pourrait être sympa.

Quelques propositions de résolution et d'amélioration

Mesures en pourcentage

Lors d'un échange avec Raphi, celui-ci m'a suggéré l'utilisation de pourcentages afin de gérer plus aisément les décalages et dimensions des différents éléments.
Voici la mise en pratique directement sur son site web : http://kanraf.fr/

Solutionnement du saut créé lors du clic sur une ancre

Vincent De Oliveira a travaillé sur une solution afin de supprimer le saut naturellement créé par le clic sur une ancre.
Rappelons qu'il s'agit du comportement naturel de l'ancre, qui a pour but d'emmener le visiteur à un endroit ciblé dans la page.

La solution consiste à cibler des éléments cachés (display:none;) et agir sur les frères indirect (General siblings : ~).
Voici le résultat de ses recherches : CSS3Create - Empêcher le scroll avec l'utilisation de :target

Discutons-en sur le forum

Pour ceux qui souhaitent discuter de tout cela, je vous invite à suivre le forum.

Liens utiles :

Quiz

Testez vos connaissances avec un Quiz CSS

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.