Question 1

Quelles fonctions de filtre CSS sont disponibles ?

Accepted Answer

CSS filter supporte : blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate et sepia. Vous pouvez combiner plusieurs filtres dans une seule propriété filter, appliqués dans l'ordre listé.

Question 2

La propriété CSS filter affecte-t-elle les performances ?

Accepted Answer

Les filtres CSS sont accélérés par GPU dans les navigateurs modernes, mais un blur intense ou plusieurs filtres empilés peuvent impacter les performances de rendu, surtout sur mobile. Pour les animations, utilisez will-change: filter pour optimiser.

Question 3

Puis-je appliquer des filtres CSS uniquement au fond (pas aux éléments enfants) ?

Accepted Answer

Non, la propriété filter s'applique à tout l'élément y compris ses enfants. Pour filtrer uniquement le fond, utilisez backdrop-filter pour un effet glassmorphism, ou isolez le fond dans un pseudo-élément séparé.

Question 4

Quelle est la différence entre filter: opacity() et la propriété opacity ?

Accepted Answer

Les deux contrôlent la transparence, mais filter: opacity() utilise l'accélération matérielle et peut être combiné avec d'autres fonctions filter. La propriété opacity est plus simple et crée un nouveau contexte d'empilement. Pour l'opacité seule, la propriété opacity est généralement préférée.

Question 5

Les filtres CSS peuvent-ils être utilisés sur des éléments SVG ?

Accepted Answer

Oui. Les filtres CSS s'appliquent aux éléments SVG comme aux éléments HTML. De plus, SVG a ses propres primitives de filtre (feBlur, feColorMatrix, etc.) qui offrent plus de contrôle que les raccourcis de filtre CSS.

Générateur de Filtres CSS

Filtres

Questions Fréquentes

Comments & Feedback