Voici quelques jours qu’un drôle de tutoriel traine sur le site de la communauté d’Alsacréations.
Ce tutoriel aborde la construction de deux slideshow de manière assez basique et dans une utilisation plutôt limitée par le langage lui-même, cependant vous y trouverez :
- Un slideshow permettant d’aborder :
- la pseudo-classe target
- les transitions CSS
- Un second slide pour aborder :
- les keyframes
- les animations CSS
Je ne vous en dis pas plus. Pour ceux qui auraient déjà lu cet article à propos la plateforme de test de CreativeJuiz, vous avez certainement déjà exploré les codes sources ou vu les fonctionnalités citées ci-dessus.
Je vous invite donc à y voir plus clair en suivant le tutoriel sur la création d’un Slideshow en CSS3 rédigé par mes soins.
N’hésitez pas à faire un retour sur le forum d’Alsacréations ou directement ici.
Bonne lecture !
Super le tuto, je l’ai vu sur alsa, merci 😉
Bonjour, j’ai lu votre tuto sur le slideshow avec contrôle au clic (:target) ; sachant que je suis novice dans ce domaine, je l’ai trouvé hyper clair.
Je l’ai testé pour un site que je suis en train (d’essayer) de faire. Le slideshow fonctionne correctement lorsque mes images font toutes la même taille, seulement je n’arrive pas à y insérer des images de tailles differentes (même hauteur mais largeurs différentes). Pourriez-vous m’éclairer?
Et encore merci.
++
Bonjour,
Merci pour ce retour d’expérience 🙂
Il est possible de fixer la largeur des slides et de définir pour les images une largeur max et une hauteur automatique :
img { max-width: 100%; height: auto; }Bonne continuation.