Як відновити цей ефект розмивання iOS7

Перепробував багато, але я просто не можу його зрозуміти, як мені досягти напівпрозорої панелі вкладок так:

введіть тут опис зображення

effects blur

Можливий дублікат Як створити неруйнівний та багаторазовий ефект розмитого / матового скла?

— Joonas

Нижня частина гауссова розмита і має напівпрозору білу накладку.

Крок 1: Виберіть область накладання на задньому плані (оригінальне зображення) та застосуйте гауссова розмиття радіусом 12 пікселів.

Крок 2: Створіть новий шар, виберіть ту саму частину для накладення, заповніть її білим кольором і надайте цьому шару непрозорість 66%

Відтворено у верхній частині вашого опорного зображення:
EDIT: нові параметри, що відповідають оригіналу

введіть тут опис зображення

— Пітер Вальсер
джерело

Я припускаю, що це робиться з кодом, якщо це скріншот. Я думаю, це зводиться до того, чи він / вона просить зробити це в композиції чи макеті, чи реалізувати це в Інтернеті.

— Ерік

@ Peter Walser як створити область накладання, яка буде застосована гауссом, якщо буде більше шарів? Потрібно спочатку їх об’єднати?

— Фред Коллінз

@FredCollins: так, або ви спочатку їх об'єднаєте і розмиєте виділення, або створюєте новий шар з копією об'єднаного виділення (який потрібно буде відтворити щоразу, коли змінюється шар).

— Пітер Уолсер

@PeterWalser дякую. Останнє запитання. Для створення нового прозорого шару з непрозорістю 66% я використовую інструмент прямокутника, але я вважаю, що є кращий спосіб. Як створення маски / відсікання маски для розмитого шару чи чогось подібного. Що ти пропонуєш?

— Фред Коллінз

Окремим шаром можна швидко регулювати загальну непрозорість. Рішення маски непрозорості має той же результат, тут ви навіть можете налаштувати непрозорість на піксель. І, звичайно, можна поєднувати обидва підходи (маска + прозорість шару). Що б краще для вас не працювало.

— Пітер Уолсер

Ви не визначили, яку програму чи технологію ви використовуєте. Отже, поки Петро описав хороший спосіб зробити це за допомогою Photoshop , я хотів би додати, що цей ефект можна створити також за допомогою CSS3.

Ось пік необхідного CSS:

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

#iOSopacity
{
    opacity: 0.6;
}

Не кажучи, що саме так ви маєте зробити ... насправді я особисто використовував би процедуру Пітера.

— е-суші
джерело