Arrière-plan flou avec CSS

Je souhaite un effet de style Vista / 7-aero-glass sur une fenêtre contextuelle de mon site, qui doit être dynamic. Je vais bien, car ce n’est pas un effet multi-navigateur tant que le site fonctionne toujours sur tous les navigateurs modernes.

Ma première tentative était d’utiliser quelque chose comme

#dialog_base { background:white; background:rgba(255,255,255,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } 

Cependant, comme j’aurais dû m’y attendre, le contenu de la boîte de dialog s’estompait et l’arrière-plan restait clair. Existe-t-il un moyen d’utiliser CSS pour rendre flou l’arrière-plan d’un élément semi-transparent au lieu de son contenu?

OCT. MISE À JOUR 2016

Étant donné que la propriété -moz-element() ne semble pas être largement prise en charge par les autres navigateurs, sauf pour FF, il existe une technique encore plus simple pour appliquer le flou sans affecter le contenu du conteneur. L’utilisation de pseudo-éléments est idéale dans ce cas en combinaison avec le filtre svg blur.

Vérifiez la démo en utilisant pseudo-element

(La démo a été testée dans FF v49, Chrome v53, Opera 40 – IE ne semble pas prendre en charge le flou avec les filtres css ou svg)


Le seul moyen (jusqu’à présent) d’avoir un effet de flou en arrière-plan sans les plugins js, est d’utiliser la propriété -moz-element() en combinaison avec le filtre svg blur. Avec -moz-element() vous pouvez définir un élément en tant qu’image d’arrière-plan d’un autre élément. Ensuite, vous appliquez le filtre svg blur. FACULTATIF: Vous pouvez utiliser jQuery pour faire défiler si votre arrière-plan est en position fixed .

Voir ma démo ici

Je comprends que c’est une solution assez compliquée et limitée à FF ( element() s’applique uniquement à Mozilla pour le moment avec la propriété -moz-element() ) mais au moins il y a eu des efforts dans le passé pour implémenter dans les navigateurs webkit sera mis en œuvre dans le futur .

Vous pouvez utiliser un pseudo-élément comme arrière-plan du contenu avec la même image que l’arrière-plan, mais flou avec le nouveau filtre CSS3.

Vous pouvez le voir en action ici: http://codepen.io/jiserra/pen/JzKpx

Je l’ai fait pour personnaliser une sélection, mais j’ai ajouté l’effet d’arrière-plan flou.

Depuis Safari 9.0, vous pouvez utiliser la propriété backdrop-filter.

HTML

 
backdrop blur

CSS

 div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } 

ou si vous avez besoin d’une couleur de fond différente pour les navigateurs sans assistance:

 div { background-color: rgba(255, 255, 255, 0.9); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5); } } 

JSFiddle

Mozilla Développeur: backdrop-filter

Puis-je utiliser

Il existe une technique simple et très courante en utilisant 2 images de fond: une image nette et floue. Vous définissez l’image nette comme arrière-plan pour le corps et celle floue comme image d’arrière-plan pour votre conteneur. L’image floue doit être réglée sur un positionnement fixe et l’alignement est parfait à 100%. Je l’ai utilisé avant et ça marche.

 body { background: url(yourCrispImage.jpg) no-repeat; } #container { background: url(yourBlurryImage.jpg) no-repeat fixed; } 

Vous pouvez voir un exemple de travail au violon suivant: http://jsfiddle.net/jTUjT/5/ . Essayez de redimensionner le navigateur et de voir que l’alignement n’échoue jamais.


Si seulement CSS element() était supporté par d’autres navigateurs que -moz-element() de Mozilla, vous pourriez créer de superbes effets. Voir cette démonstration avec Mozilla .

Utilisez un élément vide dimensionné pour le contenu comme arrière-plan et positionnez le contenu sur l’élément flou.

 #dialog_base{ background:white; background:rgba(255,255,255,0.8); position: absolute; top: 40%; left: 50%; z-index: 50; margin-left: -200px; height: 200px; width: 400px; filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } #dialog_content{ background: transparent; position: absolute; top: 40%; left: 50%; margin-left -200px; overflow: hidden; z-index: 51; } 

L’élément background peut être à l’intérieur de l’élément content, mais pas l’inverse.

 
Some Content

Ce n’est pas facile si le contenu n’est pas toujours de taille constante, mais cela fonctionne.

Vous pouviez passer à travers les iframes … J’ai créé quelque chose, mais mon seul problème pour l’instant est de synchroniser ces divs pour faire défiler simultanément … c’est terrible, car c’est comme si vous chargiez 2 sites web, mais la seule façon que j’ai trouvée … Vous pouvez aussi travailler avec des divs et des débordements, je suppose …

De quelle manière voulez-vous qu’il soit dynamic? Si vous souhaitez que la fenêtre contextuelle mette en arrière-plan avec succès, vous devez créer deux arrière-plans. Il nécessite à la fois l’utilisation de element() ou -moz-element() et un filtre (pour Firefox, utilisez un filtre SVG comme filter: url(#svgBlur) car Firefox ne supporte pas -moz-filter: blur() pour le moment ?). Il ne fonctionne que dans Firefox au moment de la rédaction.

Voir la démo ici.

J’ai encore besoin de créer une démo simple pour montrer comment cela se fait. Vous êtes invités à voir la source.