Cómo volver a crear este efecto de desenfoque iOS7

Intenté mucho pero no puedo entenderlo, ¿cómo puedo lograr una barra de pestañas translúcida como esta:

ingrese la descripción de la imagen aquí

effects blur

— Nimbuz
fuente

posible duplicado de Cómo crear un efecto de vidrio borroso / esmerilado no destructivo y reutilizable?

— Joonas

La parte inferior es borrosa gaussiana y tiene una capa blanca semitransparente .

Paso 1: Seleccione el área de superposición en el fondo (la imagen original) y aplique un desenfoque gaussiano de radio 12px.

Paso 2: crea una nueva capa, selecciona la misma parte para la superposición, llénalo de blanco y dale a esta capa una opacidad del 66%

Reproducido con la parte superior de su imagen de referencia:
EDITAR: nuevos parámetros para que coincidan con el original

ingrese la descripción de la imagen aquí

— Peter Walser
fuente

Supongo que esto se hace con código, si se trata de una captura de pantalla. Supongo que todo se reduce a si él o ella está pidiendo hacer esto en una composición o maqueta, o implementarlo en línea.

— Eric

@Peter Walser, ¿cómo crear el área de superposición que se aplicará al gaussiano si hay más capas? ¿Necesita primero fusionarlos?

— Fred Collins

@FredCollins: sí, o los combina primero y difumina la selección, o crea una nueva capa con una copia de la selección fusionada (que necesitaría volver a crear cada vez que se cambia una capa).

— Peter Walser

@ PeterWalser gracias. Última pregunta. Para crear la nueva capa transparente con una opacidad del 66%, uso la herramienta rectángulo, pero creo que hay una mejor manera. Como crear una máscara / máscara de recorte para la capa borrosa o algo similar. ¿Que sugieres?

— Fred Collins

Con una capa separada, puede ajustar rápidamente la opacidad general. La solución de máscara de opacidad tiene el mismo resultado, aquí incluso puede ajustar la opacidad por píxel. Y, por supuesto, puede combinar ambos enfoques (máscara + transparencia de capa). Lo que funcione mejor para ti.

— Peter Walser

No definió qué programa o tecnología está utilizando. Entonces, aunque Peter describió una buena manera de hacerlo con Photoshop , me gustaría agregar que este efecto también se puede crear usando CSS3.

Aquí hay un pico en el CSS necesario:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

No digo que así es como debes hacerlo ... de hecho, personalmente usaría el procedimiento de Peter.

— e-sushi
fuente