D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2015 год

RSS лента новостей, Подписка по Email

      Фон для сайта матовое стекло. Используем и не используем размытие blur

         Не так давно я занялся редизайном сайта atola.name и решил добавить не просто меняющийся каждый час фон, но и применить «эффект матового стекла» к плашкам фона. Получилось красиво.

(07.12.2015 blogger) Фон для сайта матовое стекло - Используем размытие blur

         Основной вопрос был в реализации. Я очень хотел использовать фильтр Блур в 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 килобайт. А для сайта с фотографиями - это даже меньше сторонних плагинов.
         На мобильной версии сайта сам фон становится размытым, а блоки заголовка, текста и подвала - белыми с прозрачностью (просто другая картинка).

         
         
Главная, 1, 2,
( 70 )