Comment recréer cet effet de flou iOS7

J'ai beaucoup essayé mais je ne peux pas vraiment l'obtenir, comment puis-je obtenir une barre d'onglets translucide comme celle-ci:

entrez la description de l'image ici

effects blur

— Nimbuz
source

doublon possible de Comment créer un effet de verre flou / dépoli non destructif et réutilisable?

— Joonas

La partie inférieure est floue gaussienne et a une superposition blanche semi- transparente.

Étape 1: Sélectionnez la zone de superposition sur l'arrière-plan (l'image d'origine) et appliquez un flou gaussien de rayon 12px.

Étape 2: Créez un nouveau calque, sélectionnez la même partie pour la superposition, remplissez-la de blanc et donnez à ce calque une opacité de 66%

Reproduit avec la partie supérieure de votre image de référence:
EDIT: nouveaux paramètres pour correspondre à l'original

entrez la description de l'image ici

— Peter Walser
source

Je suppose que cela se fait avec du code, s'il s'agit d'une capture d'écran. Je suppose que cela revient à savoir s'il demande ou non de le faire dans une composition ou une maquette, ou de le mettre en œuvre en ligne.

— Eric

@Peter Walser comment créer la zone de superposition qui sera appliquée le gaussien s'il y a plus de couches? Besoin d'abord de les fusionner?

— Fred Collins

@FredCollins: oui, soit vous les fusionnez d'abord et brouillez la sélection, soit vous créez un nouveau calque avec une copie de la sélection fusionnée (qui devra être recréée à chaque changement de calque).

— Peter Walser

@PeterWalser merci. Dernière question. Pour créer le nouveau calque transparent avec une opacité de 66%, j'utilise l'outil rectangle mais je pense qu'il y a une meilleure façon. Comme créer un masque / masque d'écrêtage pour le calque flou ou quelque chose de similaire. Que suggérez-vous?

— Fred Collins

Avec un calque séparé, vous pouvez ajuster rapidement l'opacité globale. La solution du masque d'opacité a le même résultat, ici vous pouvez même ajuster l'opacité par pixel. Et, vous pouvez bien sûr combiner les deux approches (masque + transparence de calque). Celui qui vous convient le mieux.

— Peter Walser

Vous n'avez pas défini le programme ou la technologie que vous utilisez. Donc, alors que Peter a décrit une belle façon de le faire avec Photoshop , je voudrais ajouter que cet effet peut également être créé à l'aide de CSS3.

Voici un aperçu du CSS nécessaire:

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

#iOSopacity
{
    opacity: 0.6;
}

Je ne dis pas que c'est ainsi que vous devez le faire… en fait, j'utiliserais personnellement la procédure de Peter.

— e-sushi
source