Dans ce tuto vidéo, je vous propose d'apprendre à réaliser un background animé en CSS3, à l'aide d'images et d'animations avec les keyframes CSS.
Au cours de ce tuto background animé et keyframes CSS nous verrons :
- comment choisir les illustrations et comment les enregistrées pour les utiliser dans la création du background (choix de la taille, format, et optimisation de leur poids sur Illustrator et Photoshop)
- l'utilisation d'un pattern pour répéter la même image autant de fois que nécessaire
- l'utilisation des keyframes et de leur syntaxe
Qu'ils soient purement décoratifs, ou qu'ils permettent de mettre en avant un produit, ou un service, les background animés peuvent se révéler être un choix intéressant et original, car peu courant sur le Web.
À l'issu de ce tuto, vous serez en mesure de créer vos propres background animé, à l'aide de vos propres illustrations.
L'animation du background fonctionnera aussi bien sur tablette que sur mobile.
Je reste disponible en cas de besoin, dans la section entraide.
Table des matières de cette formation CSS (durée : 41m)
-
- Préparation des images 00:15:07
- Intégration du header 00:12:52
- Animation avec les keyframes 00:07:55
- Responsive et compatibilité 00:05:06
- Fichiers sourcestélécharger
- Certificat
Formateur : Sébastien Imbert
-
Très intéressant l'animation en CSS. Bon tuto.
-
Merci pour ce tutoriel. :)
-
Merci Sébastien, pour cet excellent tuto, je me suis éclaté, c'est super d'apprendre avec toi :) Je recommande vivement !!!
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés