web-dev-qa-db-fra.com

Flou de page complet en CSS

Comment flouter une page entière en utilisant CSS? D'autres éléments tels que les images sont autorisés.

cssblur
26
Steve

Cela fonctionne dans Firefox et WebKit en utilisant la filter: blur(radius). Voir Puis-je utiliser: filtres CSS pour quels navigateurs peuvent le supporter.

.blurredElement {

     /* Any browser which supports CSS3 */
    filter: blur(1px);

    /* Firefox version 34 and earlier */
    filter: url("blur.svg#gaussian_blur");

    /* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
    -webkit-filter: blur(1px);
}

Le blur.svg pour Firefox 34 ou inférieur ressemble à ceci:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="gaussian_blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
        </filter>
    </defs>
</svg>

Vous pouvez ajuster le rayon, mais des valeurs inférieures signifient de meilleures performances.

28
tobspr

Vous pouvez utiliser la propriété filter avec blur, bien qu'elle ne soit pas largement prise en charge: http://jsfiddle.net/GkXdM/1/ . Il est pris en charge sur Chrome, mais il vient avec une grosse pénalité de performance lorsqu'il est utilisé sur toute la page.

body {
    filter: blur(2px);
}
9
pimvdb

Démo de la vie réelle ici: http://premium.wpmudev.org/project/e-commerce/ (cliquez sur la vidéo).

Ils ajoutent la classe thickbox-open au corps, lorsque la boîte épaisse est ouverte, et à partir de là, ciblez et stylisez un élément complet (sauf superposition et popup) contenant un élément comme ceci:

.thickbox-open #main-container {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px); 
}

D'accord, non, toujours pas entièrement utilisable ( http://caniuse.com/css-filters ), mais nous y arrivons.

Appliquer à un élément conteneur comme ci-dessus plutôt qu'à body car un filtre flou ne peut pas être annulé par les éléments enfants.

8
Jason Hibbs

Je ne sais pas si c'est ce que vous voulez dire, mais un effet flou souvent vu est créé en créant un élément DIV pleine hauteur, pleine largeur avec un jeu de propriétés d'arrière-plan et d'opacité.

/* DIV-element with black background and 50% opacity set */
div.overlay {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* required for opacity to work in IE */
}

Étant donné que la hauteur de votre page peut varier, vous voudrez probablement utiliser Javascript pour définir la hauteur de cet élément.

7
Aron Rotteveel

Cela n'est possible dans Firefox qu'à ce moment. Voici les étapes (voir l'exemple ici ).

Vous avez besoin du type de document XHTML (puisque nous utilisons le balisage XML SVG).

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

Insérez l'élément SVG à l'endroit où le flou doit apparaître.

<div class="blurDiv"></div>
<svg:svg>
    <!-- Filter -->
    <svg:filter id="blurLayer">
         <!-- Blur and attributes -->
         <svg:feGaussianBlur stdDeviation="0.9"/>
    </svg:filter>
</svg:svg>

Inclure le style en ligne (pas à partir d'un fichier CSS externe).

<style type="text/css">
    div.blurDiv { filter:url(#blurLayer); }
</style>

Cela vous donne un vrai flou (comme un effet de zoom arrière), pas le look de verre transparent standard que vous trouverez partout ailleurs.

4
Joseph Lust

Voici une solution rapide et sale, prenez-la et utilisez-la si vous le souhaitez, testée sur Firefox et Chrome, mais devrait fonctionner sur les navigateurs compatibles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur</title>
<style type="text/css">
#f0,#f1,#f2{position:absolute;left:0px;top:0px;height:95%}
#f0{filter:alpha(opacity=50);opacity: 0.15;-moz-opacity:0.15;z-index:15}
#f1{filter:alpha(opacity=25);opacity: 0.25;-moz-opacity:0.25;z-index:2}
#f2{filter:alpha(opacity=75);opacity: 0.75;-moz-opacity:0.75;}
.fin{margin-right:auto;margin-left:auto}
body{display:none}
</style>
<script type="text/javascript">
var winX=window.innerWidth-20;
var winY=screen.availHeight-10;
var count=0;
var maxCount=50;
var goBlur=true;

function ele(id) {
    return document.getElementById(id);
}
function runBlur() {
    if(goBlur) {
        for(var i=0; i<2; i++) {
            var x = Math.random()<0.5?-1:1;
            var y = Math.random()<0.5?1:-1;
            if(ele("f"+i).offsetLeft >3)
                x=-1;
            else if(ele("f"+i).offsetLeft<-3)
                x=1;
            if(ele("f"+i).offsetLeft >3)
                y=-1;
            else if(ele("f"+i).offsetLeft<-3)
                y=1;

            ele("f"+i).style.left = (ele("f"+i).offsetLeft + x)+"px";
            ele("f"+i).style.top = (ele("f"+i).offsetTop + x)+"px";
        }
    }
    count++
    if(count>maxCount) {
        count=0;
        if(goBlur)
            goBlur=false;
        else
            goBlur=true;
        for(var i=0; i<3; i++) {
            ele("f"+i).style.left = "0px";
            ele("f"+i).style.top = "0px";
        }
    }
    setTimeout("runBlur()",200);
}

function pageLoaded() {
    var content = document.body.innerHTML;
    var rewriteBody="";
    for(var i=0; i<3; i++) {
        rewriteBody+='<div id="f'+i+'"><div class="fin">'+content+'</div></div>';
    }
    document.body.innerHTML=rewriteBody;
    setTimeout("setUp()",200);
}
function setUp() {

    for(var i=0; i<3; i++) {
        ele("f"+i).style.width=winX+"px";
    }

    document.body.style.display="block";
    runBlur();
}
</script>
    </head>
    <body onload="pageLoaded()">
<h1 style="color:#900">Page blur example</h1>
You can put any page content and html you want here.
    </body>
</html>
4
coops

Quoi que vous essayiez de faire, si ce n'est pas juste pour le plaisir, ne le faites pas :)

Je pense qu'il faudrait boucler tous les éléments à travers le filtre de flou qui ne fonctionne qu'avec IE et pas avec firefox.

Voici une solution laide pour obtenir un flou laid IMO dans FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/

0
markus