dans Programmation 101
CSS et les animations d’éléments
Tous ceux et celles qui ont développé en HTML, CSS, JS il y a 10 à 20 savent à quel point le CSS peut être frustrant pour un débutant. En effet, d’un navigateur à l’autre avec le même code, on arrivait à 2 résultats complètement différents. Encore aujourd’hui, le CSS est grandement utilisé sur le web, ce qui nous permet grâce à sa troisième mouture de créer des applications fluides et… coquettes!
Avant de commencer, je considère ici que le lecteur a une base de CSS. Par exemple, vous savez comment les sélecteurs fonctionnent.
Un peu d’histoire sur CSS
Premièrement, CSS signifie Cascading Style Sheets. Ce langage qui soufflera sa 21e bougie ce 17 décembre permet de définir ce à quoi un document structuré de présentation devrait ressembler (comme un document HTML). Puis, ce code est intégré à un document, et un processeur comme Blink (Chromium) ou EdgeHTML (MS Edge) va générer visuellement le document formaté.
Aujourd’hui, CSS est régit par des standards qui permettent de faciliter la vie aux développeurs. En effet, il n’était par rare il y a quelques années de voir du code pour IE, du code pour Opera, etc..
Un bouton!
Voici le code d’un bouton. On va partir d’ici le styliser et l’animer juste un peu.
|
1 |
<button type="button">Click!</button> |
Rien de bien sorcier! Le voici:
Ensuite, on peut le styliser, disons avec ce code CSS:
|
1 2 3 4 5 6 |
button { color: #404040; padding: .5em 2em; border: 2px solid #e0e0e0; background-color: white; } |
Donc ici, on ajoute une bordure, une trame de fond et un peu d’espacement entre la bordure et le texte du bouton afin de se donner un peu d’espace. Voici notre bouton:
Puis, afin qu’on ait un feedback visuel sur le bouton, on pourrait décider de changer sa couleur lorsqu’on passe par dessus avec la souris. Ceci est fait avec le sélecteur :hover qu’on ajoute à notre bouton comme ceci:
|
1 2 3 4 5 6 7 8 9 10 11 |
button { color: #404040; padding: .5em 2em; border: 2px solid #e0e0e0; background-color: white; } button:hover { background-color: #51ab6d; color: white; } |
Donc ici, notre bouton changera de couleur pour le vert lorsqu’on passe la souris par dessus.
Comme vous pouvez voir avec ce dernier bouton, le changement de couleur se fait d’un coup ce qui est assez agressant pour l’utilisateur. Ensuite, pour rendre tout ça fluide, nous allons utiliser les transitions CSS. En effet, CSS nous offre une propriété pour effectuer une transition graduelle des styles qui s’appelle transition [property] [timing-function] [animation-length] (duh!). Par contre, cette transition est un shorthand aux propriétés suivantes:
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Puis, pour rendre notre bouton plus fluide, voici comment faire tout ça simplement:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
button { color: #404040; padding: .5em 2em; border: 2px solid #e0e0e0; background-color: white; transition: all .3s; } button:hover { cursor: pointer; background-color: #51ab6d; color: white; } |
Le résultat:
Finalement, le résultat est beaucoup plus fluide 🙂
Conclusion
Ajourd’hui, CSS permet de faire des animations simples comme on vient de le voir. Auparavant, ces animations devaient être faites en JavaScript avec des boucles et des timers. Grâce à ça, les applications sont désormais beaucoup plus fluides, puisque l’animation est exécutée par le navigateur dans son langage compilé au lieu d’être interprété par l’interpréteur JS.
Lors du prochain article, je vais vous montrer comment faire de véritables animations complexes entièrement personnalisées. En attendant, profitez-en pour aimer notre page Facebook ou relire cet article sur les 6 trucs pour devenir un meilleur développeur!
Commentaires
1 commentaire
Fantastique article! C’est très bien expliqué et on-point pour faire du beau CSS. Ça démontre la facilité du CSS de façon court et précis.
Laisser un commentaire