Introduction et Préparation des Images
Objectifs
Les objectifs de cette vidéo sont :
- Apprendre à utilser les keyframes CSS
- Savoir positionner les éléments en utilisant position absolue
- Créer un slider automatique avec des images en HTML et CSS
Résumé
Cette leçon couvre la création d'un slider automatique en utilisant les keyframes CSS. Vous apprendrez à structurer votre HTML et à appliquer le CSS nécessaire pour animer les images.
Description
Dans cette leçon, nous allons créer un slider automatique en utilisant les keyframes CSS. Le processus commence par l'incorporation des images dans notre fichier HTML, suivi de l'application de styles CSS pour les positionner. Nous utiliserons ensuite des animations CSS pour faire défiler les images automatiquement. En structurant les images dans une grande bande qui se déplace horizontalement, nous pouvons créer des transitions fluides entre les images.
Les images seront placées dans une liste, et nous les styliserons pour qu'elles apparaissent les unes à côté des autres. Ensuite, nous créerons l'animation avec des keyframes pour contrôler le défilement des images. Les keyframes seront définis pour décaler la bande d'images à intervalles réguliers, créant ainsi l'effet de slider automatique.
Nous allons également aborder les techniques de positionnement, notamment l'utilisation de positionnement absolu et de marges négatives pour gérer le décalage des images. À la fin de cette leçon, vous serez en mesure de créer un slider automatique compatible avec différents navigateurs en utilisant les préfixes nécessaires pour chaque moteur de rendu.
Questions - réponses
Programme détaillé
Module 1 - Introduction à la formation HTLM5 et CSS3
Module 2 - Les bases de la mise en page
Module 3 - La mise en page avancée
Module 4 - Autres sélecteurs et propriétés
Facebook
Twitter
Linkedin
Email
Dommage.