filter : blur, brightness, contrast, grayscale
Appliquez des effets de filtre photographiques aux éléments avec les fonctions de la propriété CSS filter.
filter : blur, brightness, contrast, grayscale est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
La propriété CSS filter
La propriété filter applique des effets graphiques aux éléments — à la manière des calques de réglage de Photoshop — sans modifier l'image elle-même.
filter: blur()
Applique un flou gaussien. L'argument correspond au rayon du flou.
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
Règle la luminosité. 1 = valeur d'origine, 0 = noir, 2 = deux fois plus lumineux.
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
Règle le contraste. 1 = valeur d'origine, 0 = gris uniforme, les valeurs supérieures à 1 augmentent le contraste.
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
Convertit en niveaux de gris. 0 = couleurs complètes, 1 (ou 100 %) = complètement gris.
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
Règle la saturation des couleurs. 0 = gris, 1 = valeur d'origine, une valeur supérieure à 1 = couleurs vives.
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
Fait tourner la teinte d'un angle donné — toutes les couleurs se déplacent sur le cercle chromatique.
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
Applique une teinte sépia chaude et rétro. 0 = valeur d'origine, 1 = sépia complet.
<div class="vintage"></div>
filter: drop-shadow()
Semblable à box-shadow, mais suit la forme réellement rendue de l'élément, y compris les zones transparentes. Idéal pour les images PNG irrégulières.
<div class="icon">★</div>
Combiner plusieurs filtres
Enchaînez plusieurs fonctions de filtre en les séparant par des espaces. Elles sont appliquées de gauche à droite :
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filter crée un contexte d'empilement
L'application de filter à un élément crée un nouveau contexte d'empilement. Cela peut amener les éléments enfants avec position: fixed à se comporter comme s'ils avaient position: absolute — un problème fréquent.
Vérification rapide
Quelle fonction de filtre CSS applique un flou gaussien à un élément ?
Récapitulatif
La propriété filter applique des réglages photographiques : blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() et drop-shadow(). Enchaînez plusieurs fonctions en les séparant par des espaces. N'oubliez pas que filter crée un contexte d'empilement, ce qui peut affecter les éléments enfants en position fixe.
Questions Fréquemment Posées
La leçon « filter : blur, brightness, contrast, grayscale » est-elle gratuite ?
Oui — le texte complet de « filter : blur, brightness, contrast, grayscale » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « filter : blur, brightness, contrast, grayscale » ?
Appliquez des effets de filtre photographiques aux éléments avec les fonctions de la propriété CSS filter. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « filter : blur, brightness, contrast, grayscale » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- filter : blur, brightness, contrast, grayscale
- backdrop-filter pour un effet de verre dépoli
- mix-blend-mode pour le mélange des calques
- Propriété isolation