CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 3 - Mettre en page son site internet Améliorer les Transitions de Menu Horizontal avec CSS

Améliorer les Transitions de Menu Horizontal avec CSS

Réaliser un menu déroulant avec des transitions.
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 3 - Mettre en page son site internet
Revoir le teaser Je m'abonne
3,0
Transcription
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
3,0
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction aux Transitions CSS

Objectifs

Les objectifs de cette vidéo sont d'enseigner comment ajouter une transition CSS à un menu horizontal pour adoucir les effets visuels et comment faire en sorte que cette transition soit compatible avec tous les navigateurs web.

Résumé

Apprenez à ajouter une transition CSS pour rendre un menu horizontal plus fluide.

Description

Dans cette leçon, nous allons améliorer un petit peu notre menu situé ici. Au lieu que le rollover s'affiche de manière abrupte, nous ajouterons une transition CSS pour adoucir l'effet. Nous allons placer la propriété de transition sur l'élément inactif (au repos), plutôt que sur celui qui est actif, car cela permet une transition plus fluide.

Nous utiliserons la version raccourcie de la propriété transition pour gérer les modifications de background et de couleur, et nous inclurons des préfixes CSS pour des raisons de compatibilité avec différents navigateurs (Chrome, Firefox, Opera, etc.). Finalement, nous vérifierons le résultat dans notre navigateur pour s'assurer que la transition est correcte.

Voir plus

Questions fréquentes

Pourquoi ne place-t-on pas la transition CSS sur l'élément actif ?
Il est plus logique et fluide de placer la transition sur l'élément au repos afin d'assurer que chaque changement d'état bénéficie de cette transition.
Quels navigateurs nécessitent des préfixes CSS pour les transitions ?
Les navigateurs Chrome, Firefox et Opera, entre autres, peuvent nécessiter des préfixes CSS pour assurer la compatibilité des transitions.
Quelles propriétés CSS avons-nous ciblées pour la transition dans notre exemple ?
Nous avons ciblé les propriétés background et color, bien que nous puissions utiliser all pour simplifier le code.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
Cicine
Il y a 2 ans
Dans la séquence slide auto, pas d'explication sur le 12% du slider auto; quelle est l'origine de ce chiffre? pas d'explication me bloque. Je suis obligée d'aller voir une autre plateforme qui présente le slide auto.
Dommage.