Come ricreare questo effetto di sfocatura iOS7

Ho provato molto ma non riesco proprio a capirlo, come posso ottenere una barra delle schede traslucida come questa:

inserisci qui la descrizione dell'immagine

effects blur

— Nimbuz
fonte

possibile duplicato di Come creare un effetto vetro sfocato / smerigliato non distruttivo e riutilizzabile?

— Joonas,

La parte inferiore è sfocata gaussiana e ha una sovrapposizione bianca semitrasparente .

Step1: Seleziona l'area di sovrapposizione sullo sfondo (l'immagine originale) e applica una sfocatura gaussiana di raggio 12px.

Passaggio 2: crea un nuovo livello, seleziona la stessa parte per l'overlay, riempilo di bianco e dai a questo livello un'opacità del 66%

Riprodotto con la parte superiore dell'immagine di riferimento:
EDIT: nuovi parametri per abbinare l'originale

inserisci qui la descrizione dell'immagine

— Peter Walser
fonte

Suppongo che questo sia fatto con il codice, se questo è uno screenshot. Immagino che dipenda dal fatto che lui / lei stia chiedendo o meno di farlo in una composizione o modello, o implementarlo online.

— Eric

@Peter Walser come creare l'area di sovrapposizione che verrà applicata al gaussiano se ci sono più livelli? Devi prima unirli?

— Fred Collins,

@FredCollins: sì, o prima li unisci e sfuoti la selezione, oppure crei un nuovo livello con una copia della selezione unita (che dovrebbe essere ricreata ogni volta che un livello viene modificato).

— Peter Walser,

@PeterWalser grazie. Ultima domanda. Per creare il nuovo livello trasparente con un'opacità del 66%, utilizzo lo strumento rettangolo ma ritengo che esista un modo migliore. Come creare una maschera / maschera di ritaglio per il livello sfocato o qualcosa di simile. Che cosa suggerisci?

— Fred Collins,

Con un livello separato, è possibile regolare rapidamente l'opacità generale. La soluzione maschera di opacità ha lo stesso risultato, qui puoi anche regolare l'opacità per pixel. E, naturalmente, puoi combinare entrambi gli approcci (maschera + trasparenza livello). Qualunque cosa funzioni meglio per te.

— Peter Walser,

Non hai definito quale programma o tecnologia stai utilizzando. Allora mentre Peter ha descritto un modo carino per farlo con Photoshop , vorrei aggiungere che questo effetto può essere creato anche usando CSS3.

Ecco un picco nel CSS necessario:

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

#iOSopacity
{
    opacity: 0.6;
}

Non dicendo che è così che dovresti farlo ... in effetti, personalmente userei la procedura di Peter.

— e-sushi
fonte