javascript - img - ¿El efecto de superposición borrosa de iOS 7 usa CSS?
title label html (13)
Parece que la superposición de Apple es más que solo una transparencia. ¿Alguna idea sobre cómo lograr este efecto con CSS y posiblemente con JS?
Me hiciste querer probar, así que lo hice, mira el ejemplo aquí:
http://codepen.io/Edo_B/pen/cLbrt
Utilizando:
- HW Accelerated CSS filters
- JS para asignación de clases y eventos de teclas de flecha
- Imágenes de la propiedad CSS Clip
Eso es.
También creo que esto se puede hacer de forma dinámica para cualquier pantalla si se utiliza lienzo para copiar el contenido actual y desenfocarlo.
¡Esto podría ayudarte!
Esto cambia dinámicamente el fondo solo lo hace IOS
.myBox {
width: 750px;
height: 500px;
border: rgba(0, 0, 0, 0.5) 1px solid;
background-color: #ffffff;
}
.blurBg {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.blurBg img {
-webkit-filter: blur(50px);
margin-top: -150px;
margin-left: -150px;
width: 150%;
opacity: 0.6;
}
Aquí está mi opinión sobre esto con jQuery. La solución no es universal, lo que significa que uno debería modificar algunas posiciones y cosas dependiendo del diseño real.
Básicamente lo que hice fue: en el clon de activación / eliminar todo el fondo (lo que debería ser borroso) a un contenedor con contenido no difuminado (que, opcionalmente, tiene desbordamiento oculto si no es de ancho completo) y colocarlo correctamente. La advertencia es que en el tamaño de la ventana borrosa div no coincidirá con el original en términos de posición, pero esto podría resolverse con algunos en la función de cambio de tamaño de la ventana (sinceramente, no podría molestarme con eso ahora).
¡Realmente apreciaría su opinión sobre esta solución!
Gracias
Aquí está el fiddle , no probado en IE.
HTML
<div class="slide-up">
<div class="slide-wrapper">
<div class="slide-background"></div>
<div class="blured"></div>
<div class="slide-content">
<h2>Pop up title</h2>
<p>Pretty neat!</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<h1>Some title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
CSS
body {
margin: 0;
padding: 0;
font-family:''Verdana'', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=''3'');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}
jQuery
// first just grab some pixels we will use to correctly position the blured element
var height = $(''.slide-up'').outerHeight();
var slide_top = parseInt($(''.slide-up'').css(''top''), 10);
$wrapper_width = $(''body > .wrapper'').css("width");
$(''.blured'').css("width", $wrapper_width);
$(''.trigger'').click(function () {
if ($(this).hasClass(''triggered'')) { // sliding up
$(''.blured'').animate({
height: ''0px'',
background: background
}, 1000, function () {
$(''.blured .wrapper'').remove();
});
$(''.slide-up'').slideUp(700);
$(this).removeClass(''triggered'');
} else { // sliding down
$(''.wrapper'').clone().appendTo(''.blured'');
$(''.slide-up'').slideDown(1000);
$offset = $(''.slide-wrapper'').offset();
$(''.blured'').animate({
height: $offset.top + height + slide_top + ''px''
}, 700);
$(''.blured .wrapper'').animate({
left: -$offset.left,
top: -$offset.top
}, 100);
$(this).addClass(''triggered'');
}
});
Es posible con CSS3:
#myDiv {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}
Ejemplo aquí => jsfiddle
Este bolígrafo que encontré el otro día pareció hacerlo maravillosamente, solo un poco de CSS y 21 líneas de JavaScript. No había escuchado del comando cloneNode js hasta que encontré esto, pero funcionó totalmente para lo que necesitaba con certeza.
http://codepen.io/rikschennink/pen/zvcgx
Detalle: A. Básicamente mira su div de contenido e invoca un cloneNode en él para que cree un duplicado que luego coloca dentro del overflow: objeto de encabezado oculto que se encuentra en la parte superior de la página. B. Luego simplemente escucha el desplazamiento para que ambas imágenes parezcan coincidir y borre la imagen del encabezado ... anúndase BAM. Efecto logrado.
No es realmente posible en CSS hasta que tengan el último bit de scriptability incorporado en el lenguaje.
Esto es posible con Firefox ahora gracias al atributo de estilo de element .
Este atributo experimental le permite usar cualquier contenido HTML como imagen de fondo. Entonces, para crear el fondo necesita tres superposiciones:
- Superposición simple con un fondo sólido (para ocultar el contenido real superpuesto).
- Superposición con un fondo de
-moz-elementque establece el contenido. Tenga en cuenta que FX no admite elfilter: blur()atributofilter: blur(), por lo que necesitamos un SVG. - Superposición con contenido no difuminado.
Entonces, juntos:
Filtro de desenfoque SVG (funciona en FX, otros navegadores podrían usar filter:blur() ):
<svg>
<defs>
<filter id="svgBlur">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
</svg>
Estilo de desenfoque CSS:
.behind-blur
{
filter : url(#svgBlur);
opacity: .4;
background: -moz-element(#content);
background-repeat: no-repeat;
}
Finalmente 3 capas:
<div class="header" style="background-color: #fff"> </div>
<div class="header behind-blur"> </div>
<div class="header">
Header Text, content blurs behind
</div>
Luego, para mover esto, solo establece la background-position (muestra en jQuery pero podrías usar cualquier cosa):
$(''.behind-blur'').css({
''background-position'': ''-'' + left + ''px -'' + top + ''px''
});
He estado usando filtros svg para lograr efectos similares para sprites
<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
<filter id="greyscale">
<feColorMatrix type="saturate" values="0"/>
</filter>
<image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>
- El atributo viewBox seleccionará solo la parte de la imagen incluida que desee.
- Simplemente cambie el filtro por el que desee, como por ejemplo Keith''s
<feGaussianBlur stdDeviation="10"/>. - Use la etiqueta
<image ...>para aplicarla a cualquier imagen o incluso para usar varias imágenes. - Puedes construir esto con js y usarlo como una imagen o usar la identificación en tu css.
Mira esta página de demostración.
Esta demostración usa html2canvas para representar el documento como una imagen.
http://blurpopup.labs.daum.net/
- Cuando se hace clic en el enlace "Mostrar ventana emergente", se llama a la función ''makePopup''.
- ''makePopup'' ejecuta html2canvas para renderizar el documento como una imagen.
- La imagen se convierte en cadena de url de datos y se pinta como la imagen de fondo de la ventana emergente.
- Popup''s bg está borroso por -webkit-filter: blur
- Agregue la ventana emergente al documento.
- Mientras arrastra la ventana emergente, cambia su propia posición de fondo.
Mira esto http://codepen.io/GianlucaGuarini/pen/Hzrhf Parece que hace el efecto sin duplicación de la imagen de fondo del elemento debajo de sí mismo. Ver los textos se están borrando también en el ejemplo.
Vague.js
var vague = $blurred.find(''iframe'').Vague({
intensity:5 //blur intensity
});
vague.blur();
No estoy muy seguro de eso, creo que CSS no es capaz de hacer esto en este momento
Sin embargo, Chris Coyier ha blogueado sobre una técnica antigua con múltiples imágenes para lograr tal efecto, http://css-tricks.com/blurry-background-effect/
[Editar] En el futuro (móvil) Safari 9 habrá -webkit-backdrop-filter para exactamente esto. Mira this bolígrafo que hice para exhibirlo.
Pensé en esto durante las últimas 4 semanas y se me ocurrió esta solución.
[Editar] Escribí una publicación más profunda sobre CSS-Tricks
Esta técnica utiliza regiones CSS, por lo que la compatibilidad con el navegador no es la mejor en este momento. ( http://caniuse.com/#feat=css-regions )
La parte clave de esta técnica es separar el contenido del diseño mediante el uso de CSS Region. Primero defina un elemento .content con flow-into:content y luego use la estructura apropiada para difuminar el encabezado.
La estructura de disposición:
<div class="phone">
<div class="phone__display">
<div class="header">
<div class="header__text">Header</div>
<div class="header__background"></div>
</div>
<div class="phone__content">
</div>
</div>
</div>
Las dos partes importantes de este diseño son .header__background y .phone__content : estos son los contenedores donde debería fluir el contenido.
El uso de CSS Regions es simple como flow-from:content ( .content fluye en el content región nombrada)
Ahora viene la parte difícil. Queremos que siempre fluya el contenido a través del .header__background porque esa es la sección donde el contenido se borrará. (usando webkit-filter:blur(10px); )
Esto se hace transfrom:translateY(-$HeightOfTheHeader) the .content para garantizar que el contenido fluya siempre a través del .header__background . Esto se transforma mientras que siempre esconde algo de contenido debajo del encabezado. Reparar esto es fácil de agregar
.header__background:before{
display:inline-block;
content:'''';
height:$HeightOfTheHEader
}
para acomodarse a la transformación
Esto actualmente está trabajando en:
- Chrome 29+ (habilitar ''experimental-webkit-features'' / ''enable-experimental-web-platform-features'')
- Safari 6.1 Semilla 6
- iOS7 ( lento y sin desplazamiento )
hizo una demostración rápida ayer que realmente hace lo que estás hablando. http://bit.ly/10clOM9 esta demostración hace la paralaje basada en el acelerómetro, por lo que funciona mejor en un iPhone. Básicamente copio el contenido que estamos superponiendo en un elemento de posición fijo que se vuelve borroso.
nota: desliza hacia arriba para ver el panel.
(Utilicé IDs css horribles pero entiendes la idea)
#frost{
position: fixed;
bottom: 0;
left:0;
width: 100%;
height: 100px;
overflow: hidden;
-webkit-transition: all .5s;
}
#background2{
-webkit-filter: blur(15px) brightness(.2);
}
#content2fixed{
position: fixed;
bottom: 9px;
left: 9px;
-webkit-filter: blur(10px);
}
- clonar el elemento que desea borrar
- añádalo al elemento que desea que esté en la parte superior (la ventana helada)
- desenfocar elemento clonado con webkit-filter
- asegúrese de que el elemento clonado esté posicionado como absoluto
- al desplazar el elemento primario del elemento original, seleccione scrollTop y scrollLeft
- utilizando requestAnimationFrame, ahora configure el webkit-transform dinámicamente para traducir3d con los valores x e y para scrollTop y scrollLeft
El ejemplo está aquí:
- asegúrate de abrir en webkit-browser
- desplazarse dentro de la vista del teléfono (mejor con el mouse de Apple ...)
- ver el pie de página borroso en acción