blur() - Fonction CSS
Résumé des caractéristiques de la fonction blur()
Description de la fonction blur()
.
La fonction blur()
applique un effet de flou gaussien au visuel d'un élément.
Le flou sera appliqué quelque soit le contenu de l'élément : image, texte, vidéo, etc.
Exemple
La fonction blur() peut être utilisée avec :
backdrop-filter
: Applique un filtre graphique sur l'élément situé en arrière plan.filter
: Applique un filtre graphique (flou, contraste...) à un élément.
Syntaxe de la fonction blur()
.
- filter: blur(5px); n
La valeur
n
indique l'importance du flou : plus la valeur est élevée, plus le flou sera important. C'est une valeur numérique positive ou nulle, avec une unité de dimension (voir les unités CSS de dimension).
Les valeurs négatives et les pourcentages ne sont pas autorisés.Si aucune valeur n'est indiquée, la valeur par défaut est
0
.
Exemples d'utilisation de blur()
.
Flouter un arrière-plan sans modifier le premier plan.
Lorsqu'un flou est appliqué sur un élément, il concerne également tous les éléments enfants.
Dans notre exemple ci-dessous, l'élément contenant le texte (qui doit rester net) ne peut donc pas être un enfant de l'élément contenant l'image
(qui doit être floutée).
Le texte devrait donc s'afficher en dessous de l'image, mais il a été repositionné pour superposer à l'image (position:relative;
).
Remarque : la propriété backdrop-filter
permet d'obtenir un résultat comparable, mais la zone de flou sera limitée à la surface
de l'élément au premier plan.
sur un arrière-plan flou
Flouter un visage.
Le seul moyen de vraiment flouter un visage est de le faire sur l'image elle-même. Cette solution n'est proposée ici que pour servir d'exemple. Elle est facilement contournable.
Il faut positionner un élément sur le visage de façon manuelle : position:relative
et ajuster les valeurs des propriétés
left
et top
(il n'y a pas encore de sélecteur en CSS pour sélectionner automatiquement les visages).
Simulateur : la fonction blur()
utilisée avec filter
et backdrop-filter
.
Utilisée avec filter
la fonction blur()
floute l'élément, quelque soit sa nature (texte, image...).
Avec backdrop-filter
la fonction blur()
peut améliorer la lisibilité en floutant l'arrière-plan.
pour estomper l'arrière-plan
Compatibilité et prise en charge suivant les navigateurs.
A part Internet Explorer, qui avait adopté une syntaxe différente,la plupart des navigateurs traitent correctement les fonctions associées
aux filtres graphiques dont blur()
fait partie.
blur()
.
blur()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que blur()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. blur()
fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.