div - Desenfoque de página completa en CSS
mask blur css (8)
Lo que sea que intentes hacer, si no es solo por diversión, no lo hagas :)
Creo que tendrías que recorrer todos los elementos a través del filtro de desenfoque que solo funciona con IE y no con Firefox.
Aquí hay una solución fea para lograr una imagen borrosa desagradable de la OMI en FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/
¿Cómo puedo desenfocar una página entera usando CSS? Se permiten otros elementos como imágenes.
No estoy seguro de si esto es lo que quiere decir, pero se crea un efecto borroso a menudo visto al crear un elemento DIV de altura completa y ancho completo con un conjunto de propiedades de color de fondo y opacidad.
/* 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 */
}
Dado que la altura de su página puede variar, probablemente quiera usar Javascript para establecer la altura de este elemento.
En la pregunta del 100% de altura, no hay una solución CSS, incluso en CSS3, pero hay una manera JQuery de hacerlo. Si el elemento es #modal, defina todas las demás propiedades en el archivo CSS y ni siquiera mencione la propiedad height en el CSS. A continuación, coloque el siguiente código de JQuery en su HTML de la siguiente manera:
<script type="text/javascript">
$(function(){
$(''.modal'') .css({''height'': (($(window).height()))});
});
$(window).resize(function(){
$(''.modal'') .css({''height'': (($(window).height()))});
});
</script>
Esto requiere JQuery, por supuesto, y puede causar problemas si el contenido es más alto que la ventana gráfica. En cuanto a la capacidad de difuminar dinámicamente los contenidos que están detrás, eso es algo que me encantaría saber.
Esto es posible solo en Firefox en este momento. Estos son los pasos (ver ejemplo aquí ).
Necesita el tipo de documento XHTML (ya que estamos utilizando el marcado XML SVG).
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
Inserta el elemento SVG donde debería aparecer la imagen borrosa.
<div class="blurDiv"></div>
<svg:svg>
<!-- Filter -->
<svg:filter id="blurLayer">
<!-- Blur and attributes -->
<svg:feGaussianBlur stdDeviation="0.9"/>
</svg:filter>
</svg:svg>
Incluye estilo en línea (no desde un archivo css externo).
<style type="text/css">
div.blurDiv { filter:url(#blurLayer); }
</style>
Esto le proporciona un verdadero efecto borroso (como el efecto de alejamiento), no el aspecto estándar de vidrio transparente que se encuentra en todos lados.
Aquí hay una solución rápida y sucia, tómela y utilícela si lo desea, probado en Firefox y Chrome, pero debería funcionar en navegadores 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>
Puede usar la propiedad de filter con blur , aunque no es ampliamente compatible: http://jsfiddle.net/GkXdM/1/ . Es compatible con Chrome, pero viene con una gran penalización de rendimiento cuando se usa en toda la página.
body {
filter: blur(2px);
}
Demostración de la vida real aquí: http://premium.wpmudev.org/project/e-commerce/ (haga clic en el video).
thickbox-open la clase thickbox-open al cuerpo, cuando thickbox está abierto, y desde allí apuntan y diseñan un contenido completo (excepto superposición y popup) que contiene un elemento como este:
.thickbox-open #main-container {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
Bien, entonces no, todavía no se puede usar por completo ( http://caniuse.com/css-filters ), pero estamos llegando.
Aplíquelo a un elemento contenedor como se indica arriba en lugar de body ya que los elementos secundarios no pueden negar un filtro de desenfoque.
Esto funciona en Firefox y WebKit usando el filter: blur(radius) . Consulte ¿Puedo usar: filtros CSS para los navegadores que pueden soportar esto?
.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);
}
El blur.svg para Firefox 34 o posterior se ve así:
<?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>
Puede ajustar el radio, pero valores más bajos significan un mejor rendimiento.