1. Accueil
  2. Question et réponse
  3. Blur Full Page en CSS

Blur Full Page en CSS

2008-12-16 13 views
21

Comment estomper une page entière en utilisant CSS? D'autres éléments tels que des images sont autorisés.Blur Full Page en CSS

Source

2008-12-16 Anonymous

+0

Je ne suis pas sûr pour tous les navigateurs (en utilisant l'ombre de texte comme [suggère tharkun] (http://stackoverflow.com/questions/371209#371226) est une solution de contournement possible). Mais vous n'êtes pas le seul à le demander, et vous pouvez ajouter votre vote à cette [demande d'ajout d'effet de flou à CSS] (http://www.openajax.org/runtime/wiki/Blur_Effect). – VonC

Répondre

0

Tout ce que vous essayez de faire, si ce n'est pas juste pour le plaisir, ne le font pas :)

Je pense que vous auriez à boucler tous les éléments auge le filtre de flou qui ne fonctionne qu'avec IE et non avec firefox.

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

Source

2008-12-16 12:59:16 markus

+2

Juste pour le fun! :) –

7

Je ne sais pas si cela est ce que vous voulez dire, mais un effet de flou comme souvent vu est créé en créant une pleine hauteur, pleine width Elément DIV avec un ensemble de propriétés background-color et opacity.

/* 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 */ 
}

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

Source

2008-12-16 13:12:46

+0

Je ne pouvais pas faire juste la hauteur: 100%; ? –

+0

Non. Il n'existe malheureusement aucune règle de navigateur croisé définissant une hauteur de 100%. –

+5

si vous voulez utiliser cette anwser, changer la position à fixed, et vous pouvez définir la hauteur à 100% – BigName

-1

Sur la question 100% hauteur, il n'y a pas de solution CSS, même en CSS3, mais il y a une façon JQuery de le faire. Si l'élément est #modal, définissez toutes les autres propriétés dans le fichier CSS et ne mentionnez même pas la propriété height dans le CSS. Ensuite, placez le code suivant JQuery dans votre code HTML comme suit:

<script type="text/javascript"> 
$(function(){ 
    $('.modal') .css({'height': (($(window).height()))}); 
}); 
$(window).resize(function(){ 
    $('.modal') .css({'height': (($(window).height()))}); 
}); 
</script>

Cela nécessite JQuery bien sûr, et peut causer des problèmes si le contenu est plus grand que la fenêtre. Quant à la capacité de brouiller dynamiquement le contenu, c'est quelque chose que j'aimerais bien savoir.

Source

2011-10-12 01:07:22

+1

Modifier pour le futur. Il y a maintenant un moyen de le faire incroyablement facilement: les unités vh et vw. vh est la hauteur de la fenêtre, vw est la largeur de la fenêtre. la définition du modal sur toute la hauteur et toute la largeur serait donc .modal {width: 100vw; height: 100vh;}. –

4

Ceci est possible dans Firefox seulement pour le moment. Voici les étapes (voir l'exemple here).

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 devrait 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>

Inclut le style en ligne (pas de fichier css externe). Cela vous donne un vrai flou (comme un effet de zoom arrière), pas le verre standard que vous trouvez partout ailleurs.

Source

2011-11-01 13:33:52

4

Voici une solution rapide et sale, prendre et utiliser si vous voulez, testé sur le chrome Firefox &, mais devrait fonctionner dans les navigateurs conformes

<!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>

Source

2012-01-27 23:09:37 coops

+0

+1 Pas joli, mais je ne mérite pas les votes négatifs sans commentaire. –

+0

Cela fonctionne dans IE, Firefox, Chrome et Safari. Je suis d'accord que ce n'est pas joli et il pourrait avoir des problèmes dans le futur car cela entraînera un balisage invalide si vous utilisez un identifiant sur votre page. Mais +1 pour l'extérieur de la boîte en pensant. – Ben

23

Cela fonctionne dans Firefox et WebKit à l'aide du filter: blur(radius). Voir Can I Use: CSS filters pour quels navigateurs peuvent soutenir ceci.

.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 ci-dessous 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 régler le rayon, mais des valeurs plus basses signifient une meilleure performance.

Source

2012-08-19 07:59:19 tobspr

7

Vous pouvez utiliser la propriété filter avec blur, même si elle n'est pas largement prise en charge: http://jsfiddle.net/GkXdM/1/. Il est pris en charge sur Chrome, mais il est assorti d'une grande pénalité de performance lorsqu'il est utilisé sur toute la page.

body { 
    filter: blur(2px); 
}

Source

2012-10-26 22:38:47 pimvdb

+0

moyen le plus simple de flouter un conteneur. Génial! –

8

démo La vraie vie ici: http://premium.wpmudev.org/project/e-commerce/ (cliquez sur la vidéo).

Ils ajoutent la classe thickbox-open au corps, quand thickbox est ouvert, et à partir de là cible et le style ensemble contenu (sauf superposition et pop-up) élément contenant 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); 
}

Ok donc pas , toujours pas entièrement utilisable (http://caniuse.com/css-filters), mais nous y arrivons.

Appliquez-vous à un élément contenant comme ci-dessus plutôt qu'à body car un filtre de flou ne peut pas être annulé par des éléments enfants.

Source

2013-01-29 18:04:35

Questions connexes

 Questions connexes