Objectif Frontend. Comment flouter facilement en CSS?
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
24m32
de formation
4
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Objectif Frontend. Comment flouter facilement en CSS?

4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
24m32
de formation
4
leçons vidéo
1
chapitre

Dans ce tuto vidéo, nous allons nous intéresser au filtre CSS blur().
Ce filtre permet de flouter un élément de votre page grâce au CSS. Nous verrons comment l'utiliser en transition.

Dans notre exemple pratique, nous allons créer une page responsive qui contient des blocs qui se flouteront progressivement lorsque la souris de l'utilisateur s'en rapprochera.
Afin de mettre en avant un des blocs, ce dernier redeviendra net au survol de la souris. Ce cours sera donc l'occasion de réviser les pseudo-classes issues du langage CSS.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du code HTML
Leçon 2
Mise en place du code CSS de base
Leçon 3
Mise en place de l'effet de floutage
Leçon 4
Retirer l'effet de floutage à la section choisie par l'utilisateur

Table des matières

Leçon 1

Mise en place du code HTML

02m41
Leçon 2

Mise en place du code CSS de base

08m52
Leçon 3

Mise en place de l'effet de floutage

07m21
Leçon 4

Retirer l'effet de floutage à la section choisie par l'utilisateur

05m38

Aperçus

Avis des apprenants

Détail des avis
2
Commentaires
5/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 21/03/2025
Merci Carl pour ce cours sur le filtre CSS `blur()` : simple, efficace et un poil magique 🪄 ! J’ai particulièrement aimé la transition progressive au survol, combinée aux pseudo-classes — un duo gagnant pour capter l’attention sans en faire trop. C’est flou, mais c’est clair 😄. Validé 100%.
Carl Brison
Carl Brison
Vous avez parfaitement raison. Merci beaucoup pour votre commentaire très gentil, Alain ;-)
Bernard Chabloz
Bernard Chabloz
Publié le 12/06/2023
Un peu de css pour des petits apprentissages toujours bienvenus!
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source de ce tutoriel.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
8,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
24m32 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 752 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1420 tutos gratuits

Notre politique de protection des données