Фон для сайта матовое стекло. Используем и не используем размытие blur
Не так давно я занялся редизайном сайта atola.name и решил добавить не просто меняющийся каждый час фон, но и применить «эффект матового стекла» к плашкам фона. Получилось красиво.
Основной вопрос был в реализации. Я очень хотел использовать фильтр Блур в CSS, но там сразу началась полная ерунда. Для начала, фильтр размывает не только сам элемент, но и все содержимое. И требуется городить какую-то ерунду с псевдоэлементом before.
Потом сразу возникает вопрос кроссбраузерности. И тут выясняется, что даже самое максимальное решение с кучей префиксов, старыми фильтрами, дополнениями с SVG - не хочет просто так работать в Edge. Да и что там в старых версиях IE - не совсем понятно. И если к этому добавить первую проблему, то становится совсем грустно.
А что там с различными библиотеками и Жиквери? Иногда - вполне нормально. Иногда - нет. Но я принципиально не собираюсь навешивать на сайт гору сторонних разработок из-за 1 размытой фоновой картинки.
В итоге, всю проблему решил обычный Фотошоп. Я просто подготовил 2 разные картинки. Одну поместил в качестве фона к body, вторую - к блокам с текстом.
background: top center url('/img/blur.jpg') no-repeat;
background-attachment: fixed;
background-size: cover;
Результат получился красивый, но далеко не с первого раза. Пришлось очень долго играть с настройками.
1) Я добавил к слою стиль «Наложение цвета» (белый) с прозрачностью 40%.
2) Выбрал в фильтрах «Размытие по Гауссу» на 20 пикселей.
3) Можно добавить еще шум 1%, но в сочетании именно с cover - это не очень красиво. Шум растягивается и нужно брать фото большего размера.
4) Также, неплохо добавить немного насыщенности размытому изображению.
В принципе, это пока все. Фон разблурен, меняется скриптом каждый час. Плашкам добавлена черная прозрачная тень снизу и белая внутренняя полупрозрачная рамка (тоже тень использовал). Как бы я ни голосовал за экономию ресурсов, но размытый фон занимает не больше 30 - 40 килобайт. А для сайта с фотографиями - это даже меньше сторонних плагинов.
На мобильной версии сайта сам фон становится размытым, а блоки заголовка, текста и подвала - белыми с прозрачностью (просто другая картинка).
