Créer un background animé avec les keyframes en CSS 3
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Créer un background animé avec les keyframes en CSS 3

Sébastien Imbert
5,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Préparation des images
Leçon 2
Intégration du header
Leçon 3
Animation avec les keyframes
Leçon 4
Responsive et compatibilité

Plan détaillé du cours

Leçon 1Préparation des images
15m07s
Leçon 2Intégration du header
12m52s
Leçon 3Animation avec les keyframes
07m55s
Leçon 4Responsive et compatibilité
05m06s

Aperçus

Avis des apprenants

Détail des avis
295
Apprenants
12
Commentaires
5/5
Note moyenne
5/5
12
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Caruana
Valérie Caruana
Publié le 01/07/2024
Très intéressant, bien expliqué. Merci !
Jean Berdier
Jean Berdier
Publié le 02/01/2024
Amusant, sympa et qui ne prend pas la tête
Membre-5709-6082
Membre-5709-6082
Publié le 10/02/2021
Très bon tuto - clair et concis. Merci beaucoup.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 5,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1389 tutos gratuits

Notre politique de protection des données