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?

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

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.

[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 )

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.

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.

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.

• 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/

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);
}

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/

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();

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: 😍

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.

¡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 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');
    }
});