¿Efecto de superposición borrosa de iOS 7 usando CSS?

161

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 JS?

Más que solo transparencia

Aterronado
fuente
2
Una preocupación más apremiante en mi opinión es cómo configurar un elemento que aplica un desenfoque dinámico a cualquier objeto detrás de él. Entonces, si tuviera un objeto que pudiera desplazarse y acercarse, el elemento en la parte superior se desenfocaría dinámicamente con un impacto de bajo rendimiento.
Rodas
1
Vea también esta pregunta para un problema similar.
Keith
43
Tal vez me parezca más preocupante que esto se quiera como una 'característica IOS7', mientras que la interfaz Aero de Windows Vista ha estado haciendo exactamente lo mismo con sus cromos de ventana desde 2006.
Niels Keurentjes
1
@NielsKeurentjes Heh, un punto verdadero. Incorporé el efecto en un diseño hace unos años después de haber sido inspirado por Windows. Sin embargo, en aquel entonces elegí la ruta más simple de incluir el efecto en las imágenes. ryanwilliams.co.uk/previews/made2race/1.html
Ryan Williams el

Respuestas:

145

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

Cana
fuente
119
Esto no logra el efecto como en iOS7 donde un elemento difumina partes del fondo.
Diseño de Adrian
9
Edité mi jsfiddle, ahora funciona como IOS7;) => Efecto CSS3 IOS7
Cana
34
Como señaló Adrian, el filtro solo difumina un elemento y son elementos secundarios. No se puede usar para una superposición para desenfocar elementos principales o elementos adyacentes, por lo que el efecto iOS 7 no es posible con CSS.
Jason
10
Si crees que se está volviendo borroso para lograr este efecto, estarías equivocado. Estoy trabajando en un repositorio de código abierto simple que logra este efecto utilizando JS y CSS 3, estad atentos :)
Ryan Brodie
55
Esto no funciona en FX, no son compatibles -moz-filter: blur(). En su lugar, debe usar un filtro SVG, consulte mi respuesta para obtener más detalles.
Keith
48

Me hiciste querer probar, así que lo hice, mira el ejemplo aquí:

http://codepen.io/Edo_B/pen/cLbrt

Utilizando:

  1. HW filtros CSS acelerados
  2. JS para asignación de clases y eventos de teclas de flecha
  3. Propiedad de imágenes CSS Clip

Eso es.

También creo que esto podría hacerse dinámicamente para cualquier pantalla si se usa el lienzo para copiar el dom actual y difuminarlo.

Edo Ben Shitrit
fuente
40

[Editar] En el futuro (móvil) Safari 9 habrá -webkit-backdrop-filterexactamente para esto. Mira este bolígrafo que hice para mostrarlo.

Pensé en esto durante las últimas 4 semanas y se me ocurrió esta solución.

Demo en vivo

[Editar] Escribí una publicación más profunda sobre CSS-Tricks

Esta técnica está utilizando Regiones CSS, por lo que el soporte del navegador no es el 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 la Región CSS. Primero defina un .contentelemento con flow-into:contenty luego use la estructura apropiada para desenfocar el encabezado.

La estructura del diseño:

<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__backgroundy .phone__content, sin embargo, estos son los contenedores donde debería fluir el contenido.

El uso de Regiones CSS es simple como flow-from:content( .contentfluye hacia la región nombrada content)

Ahora viene la parte difícil. Queremos que el contenido fluya siempre a través de .header__backgroundporque esa es la sección donde se borrará el contenido. (usando webkit-filter:blur(10px);)

Esto se hace por transfrom:translateY(-$HeightOfTheHeader)el .contentde asegurar que el contenido siempre fluirá a pesar de que el .header__background. Esta transformación siempre oculta algo de contenido debajo del encabezado. Arreglar esto es fácil agregar

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

para acomodarse a la transformación.

Actualmente está trabajando en:

  • Chrome 29+ (habilite 'experimental-webkit-features' / 'enable-experimental-web-platform-features')
  • Safari 6.1 Semilla 6
  • iOS7 ( lento y sin desplazamiento )
FWeinb
fuente
1
La demostración en vivo ya no funciona. El contenido va debajo del teléfono y aparece el error JS "TypeError: sheet.addRule no es una función"
BoffinBrain
Funciona bien con Safari en Mac e iOS.
Carlos Silva
16

Esto es posible con FireFox ahora gracias al atributo de estilo de elemento .

Este atributo experimental le permite usar cualquier contenido HTML como imagen de fondo. Entonces, para crear el fondo necesita tres superposiciones:

  1. Superposición simple con un fondo sólido (para ocultar el contenido de superposición real).
  2. Superposición con un -moz-elementfondo que establece el contenido. Tenga en cuenta que FX no admite el filter: blur()atributo, por lo que necesitamos un SVG.
  3. Superposición con contenido no borroso.

Entonces, juntos:

Filtro de desenfoque SVG (funciona en FX, podrían usar otros navegadores 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">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

Luego, para mover esto, solo configure el background-position(ejemplo en jQuery pero podría usar cualquier cosa):

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
}); 

Aquí es como un JS Fiddle, solo FX.

Keith
fuente
1
Su solución es similar a la que tenía en mente. Solucioné la falla ( jsfiddle.net/RgBzH/30 ) extendiendo la parte del fondo borrosa, por lo que la falta de definición ocurre realmente en el contenido real, no en el cortado. Buena ejecución, de todos modos.
Pier Paolo Ramon
@PierPaoloRamon bonito ajuste: si iba a usar esto, probablemente ampliaría un poco el filtro SVG para incluir el aumento de brillo / contraste reducido que iOS7 también hace, pero FX solo significa estrictamente sandbox en este punto. He hecho otra pregunta sobre soluciones alternativas.
Keith
Por cierto, su solución solo trae un desenfoque similar a ios7 al sistema operativo Firefox, y eso está bien (tengo que probar eso).
Pier Paolo Ramon
14

Mira esta página de demostración.
Esta demostración utiliza html2canvas para representar el documento como una imagen.

http://blurpopup.labs.daum.net/

  1. Cuando se hace clic en el enlace "Mostrar ventana emergente", se llama a la función 'makePopup'.
  2. 'makePopup' ejecuta html2canvas para representar el documento como una imagen.
  3. La imagen se convierte en una cadena de url de datos y se pinta como la imagen de fondo de la ventana emergente.
  4. El bg de Popup está borroso por -webkit-filter: blur
  5. Agregue la ventana emergente en el documento.
  6. Mientras arrastra la ventana emergente, cambia su propia posición de fondo.
Gyutae Jo
fuente
1
Proporcione una explicación de lo que realmente hace la demostración, ya que una vez que se desactiva, no será de ninguna ayuda.
Jonathan Drapeau el
Esa es una muy buena idea: desafortunadamente, html2canvas es demasiado experimental para confiar en él y probablemente demasiado grande a menos que las capturas de pantalla sean de lo que se trata su aplicación.
Keith
55
está abajo @JonathanDrapeau como predijiste.
Mark
¡Cortejar! Me encanta la podredumbre del enlace!
evolutionxbox
Todavía usa el desenfoque sobre las imágenes, no veo cómo esto podría funcionar en algo como una barra de navegación adhesiva.
maninak
10

Este bolígrafo que encontré el otro día parecía hacerlo maravillosamente, solo un poco de CSS y 21 líneas de JavaScript. No había oído hablar del comando cloneNode js hasta que encontré esto, pero funcionó totalmente para lo que necesitaba con seguridad.

http://codepen.io/rikschennink/pen/zvcgx

Detalle: A. Básicamente, mira su contenido div e invoca un cloneNode en él, por lo que crea un duplicado que luego coloca dentro del desbordamiento: objeto de encabezado oculto en la parte superior de la página. B. Luego, simplemente escucha el desplazamiento para que ambas imágenes parezcan coincidir y difumina la imagen del encabezado ... y BAM. Efecto logrado.

En realidad, no es totalmente factible en CSS hasta que obtienen un poco de scriptability integrado en el lenguaje.

Lux.Capacitor
fuente
¡Se ve muy bien! Aunque esto obviamente no funcionaría demasiado bien con el contenido dinámico, a menos que actualice el duplicado cada vez que algo cambie, lo que probablemente sería un gran éxito en el rendimiento.
Nass
Supongo, pero ¿no estás seguro de dónde cambiarías las imágenes y tratarías de hacer este efecto? Si se hace correctamente, no debería ser un gran éxito si recicla el clon. ¿Quizás puedas detallar un caso y conversar con esto? Supongamos, por ejemplo, que realiza una alimentación de imagen y desea que algunas opciones de menú presenten este efecto para un menú de imagen para cada elemento ... ejecute esto cuando revele el panel y el panel que se superpone luego se vería como el póster deseado. Agregue un pequeño reciclador para que dom no duplique infinitamente las imágenes cada vez que abra los menús y debería funcionar bien.
Lux.Capacitor
5
  • clonar el elemento que quieres desenfocar
  • añádelo al elemento que deseas que esté arriba (la ventana esmerilada)
  • Desenfoque el elemento clonado con webkit-filter
  • asegúrese de que el elemento clonado esté en posición absoluta
  • al desplazarse por el elemento primario original, captura scrollTop y scrollLeft
  • usando requestAnimationFrame, ahora configure el webkit-transform dinámicamente para traducir3d con valores x e y para scrollTop y scrollLeft

El ejemplo está aquí:

  • asegúrese de abrir en el navegador webkit
  • desplazarse dentro de la vista del teléfono (mejor con el mouse de Apple ...)
  • ver el pie de página borroso en acción

http://versie1.com/TEST/ios7/

usuario2523905
fuente
4

hizo una demostración rápida ayer que realmente hace de lo que estás hablando. http://bit.ly/10clOM9 esta demostración hace el paralaje basado en el acelerómetro, por lo que funciona mejor en un iPhone. Básicamente solo copio el contenido que estamos superponiendo en un elemento de posición fija que se vuelve borroso.

nota: deslice hacia arriba para ver el panel.

(Utilicé ID de css horribles, pero entiendes)

#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);
}
ericjbasti
fuente
3

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 dicho efecto, http://css-tricks.com/blurry-background-effect/

Sheriff Zyad
fuente
la instantánea de la pantalla en el lienzo podría funcionar y 'bloquear' los íconos y el fondo juntos antes de hacer esto, pero no pude ver si el fondo todavía tenía el efecto de paralaje debajo de los íconos cuando estaba borroso ... si no lo hacía t, luego, en el momento en que comienza a mover el panel de control (superposición transparente), el dispositivo crea una imagen de la pantalla y realiza este truco. Eso sí, no solo están limitados por elementos basados ​​en la web como el lienzo al hacer esto, ya que está en el nivel del sistema operativo, y es posible que no se limiten a las cosas del kit web.
entrometido el
3

Mira esto http://codepen.io/GianlucaGuarini/pen/Hzrhf Parece que hace el efecto sin duplicar la imagen de fondo del elemento debajo de sí mismo. Ver textos están borrosos también en el ejemplo.

Vague.js

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();
Onur Çelik
fuente
1
Se duplica el contenido (hay dos marcos flotantes en el ejemplo codepen se enlazó). Intente hacer clic en un elemento del menú, el iframe borroso no se actualiza.
Guglie
Es una especie de solución de todos modos.
Onur Çelik
2

Buenas noticias

A partir de hoy 11 de abril de 2020 , esto es fácilmente posible con la backdrop-filterpropiedad CSS, que ahora es una característica estable en Chrome, Safari y Edge.

Quería esto en nuestra aplicación móvil híbrida, por lo que también está disponible en Android / Chrome Webview y Safari WebView.

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
  2. https://caniuse.com/#search=backdrop-filter

Ejemplo de código:

Simplemente agregue la propiedad CSS:

.my-class {
    backdrop-filter: blur(30px);
    background: transparent;     // Make sure there is not backgorund
}

UI Ejemplo 1

Véalo trabajando en este bolígrafo o pruebe la demostración:

#main-wrapper {
  width: 300px;
  height: 300px;
  background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.my-effect {
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: top 700ms;
}

#main-wrapper:hover .my-effect {
  top: 0;
}
<h4>Hover over the image to see the effect</h4>

<div id="main-wrapper">
  <div class="my-effect">
    Glossy effect worked!
  </div>
</div>

UI Ejemplo 2

Tomemos un ejemplo de la aplicación McDonald's porque es bastante colorida. Tomé su captura de pantalla y la agregué como fondo en bodymi aplicación.

Quería mostrar un texto encima con el efecto brillante. Usando backdrop-filter: blur(20px);en la superposición encima, pude ver esto: 😍

Captura de pantalla principal ingrese la descripción de la imagen aquí

Shashank Agrawal
fuente
backdrop-filterSin embargo, todavía no funciona automáticamente en Firefox. Dudo que los usuarios activen las opciones para activar backdrop-filterdeliberadamente solo para ver este efecto.
Richard
0

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 a cualquiera que desee, como el <feGaussianBlur stdDeviation="10"/>ejemplo de Keith .
  • Use la <image ...>etiqueta para aplicarla a cualquier imagen o incluso use varias imágenes.
  • Puede construir esto con js y usarlo como una imagen o usar la identificación en su css.
technosaurus
fuente
¿Tienes algún ejemplo de esto en alguna parte? ¿Quizás un jsFiddle o similar? Gracias
Blaker
0

¡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;
}
Godwin Vinny Carole
fuente
-1

Aquí está mi opinión sobre esto con jQuery. La solución no es universal, lo que significa que uno tendría que ajustar algunas de las posiciones y cosas dependiendo del diseño real.

Básicamente lo que hice es: al clonar el disparador / eliminar todo el fondo (lo que debería ser borroso) a un contenedor con contenido no borroso (que, opcionalmente, tiene un desbordamiento oculto si no es de ancho completo) y posicionarlo correctamente. La advertencia es que al cambiar el tamaño de la ventana, el div borroso no coincidirá con el original en términos de posición, pero esto podría resolverse con alguna función de cambio de tamaño de la ventana (honestamente, no podría molestarme con eso ahora).

¡Realmente agradecería su opinión sobre esta solución!

Gracias

Aquí está el violín , 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');
    }
});
Bojana Šekeljić
fuente