Diaporama d'images en CSS sans programmation
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Diaporama d'images en CSS sans programmation

Carl Brison
Promo -33% Jusqu'au 23 juillet, 23:59
6,00€9,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Apprenez à concevoir un Diaporama sans programmation

Dans ce tuto en vidéo, je vous propose d'apprendre à réaliser un diaporama avec apparition des images en fondu.

La programmation de ce genre de diaporama est hyper complexe en JavaScript, voire en jQuery.
Je vous propose d'oublier JavaScript et jQuery et de développer ce diaporama sans aucune programmation.
De quoi alléger considérablement notre page web.

En réalité, pour réaliser ce fondu d'images, nous allons utiliser uniquement du CSS. Notre diaporama sera bien évidemment responsive, c'est à dire qu'il pourra s'afficher peu importe le terminal utilisé (smartphone, tablette, ordinateur).

A la fin du cours, vous pourrez passer un petit QCM pour valider vos connaissances acquises.
Si vous avez des questions, je reste disponible dans le salon d'entraide du tutoriel

Si vous souhaitez aller plus loin dans les connaissances de la technique que nous allons utiliser dans ce tuto, je mets à votre disposition un cours théorique dédiée à l'animation CSS.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place des bases du travail
Leçon 2
Empilement des images
Leçon 3
Mise en place de l'animation
Leçon 4
Mise en place des règles de l'animation
Leçon 5
Amélioration du style général de la page
Leçon 6
Mise en place du responsive
Leçon 7
Conclusion

Plan détaillé du cours

Leçon 1Mise en place des bases du travail
04m45s
Leçon 2Empilement des images
06m11s
Leçon 3Mise en place de l'animation
03m59s
Leçon 4Mise en place des règles de l'animation
05m40s
Leçon 5Amélioration du style général de la page
04m06s
Leçon 6Mise en place du responsive
06m05s
Leçon 7Conclusion
01m11s
Leçon 8Bonus
02m41s

Aperçus

Avis des apprenants

Détail des avis
141
Apprenants
12
Commentaires
5/5
Note moyenne
5/5
12
4/5
0
3/5
0
2/5
0
1/5
0
Eric Reynaud
Eric Reynaud
Publié le 23/03/2023
Merci beaucoup Carl pour ce tuto très instructif ! C'est à chaque fois un plaisir pour moi de vous suivre ! A bientôt, Eric.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire, Eric ;-)
Alain Tardif
Alain Tardif
Publié le 15/02/2023
Merci Carl pour ce tuto sur le diaporama d'images en CSS. C'est toujours un plaisir de suivre vos tutos. Celui-ci (comme les autres) me sera également très utile. Bravo pour la qualité de vos cours. Validé 100 % Diaporama d'images en CSS.
Carl Brison
Carl Brison
Merci beaucoup pour votre gentillesse, Alain ;-)
Valérie Crouau
Valérie Crouau
Publié le 11/01/2022
Excellent tuto mené de main de maître par l'excellent Carl Brison !!!
Carl Brison
Carl Brison
Quelle gentillesse ;-) Merci Valérie ;-)))

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

Que contient le fichier source ?

Le code du tuto

Bonjour, je voudrais être certaine que ce tuto est compatible avec tous les navigateurs (j'ai déjà réalisé un code qui fonctionne sous chrome et Mozilla mais qui n'apparait pas sous explorer et edge…)ainsi qu'être sûre qu'il s'agit bien d'un diaporama automatique, en vous remerciant, chloé Chloé

Bonjour Chloé, merci pour votre message. Le code que je propose ici est un code CSS parfaitement valide et reconnu par la W3C. Tous les navigateurs récents reconnaissent ces codes CSS. Carl.

Payer plus tard

Prix d'achat : 6,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 1380 tutos gratuits

Notre politique de protection des données