Как реализована прозрачность в теме Настроение на Яндексе?

Question

[Лилия Волкова]

В процесе изучения веб-разработки стало очень любопытно, какими средствами реализован вид матового стекла в теме Настроение поисковика Яндекс? Какие нужны знания чтобы этот эффект реализовать самостоятельно?

Answer 1

[Tenebrius]

Две картинки
Без размытия - https://yastatic.net/www-skins/_/UBOZSYh5Ea-ZGg4kQ...
и с размытием - https://yastatic.net/www-skins/_/nwpWSk0EIqn8I8S94...

Нужно уметь ставить фон блокам.

Еще есть css-фильтры - https://developer.mozilla.org/ru/docs/Web/CSS/filter
Важно помнить, что действуют они именно на элемент, а не на то, что под ним.

UPD. Пример мутной панельки
https://jsfiddle.net/Tenebrius/pus9e7vg/2/

Answer 2

[Лилия Волкова]

Насчет картинок честно сказать не очень понятно как именно они использовались, а особенно интересно как их "подогнали"

Comments

[Tenebrius]

Обновил ответ выше, добавил ссылку например.

[Лилия Волкова]

Tenebrius, Огромное спасибо за лаконичное обьяснение, надо будет поподробнее почитать инфу.