От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы показываете им дизайн с размытым фоном. А это ложь.
Потому что размытия фона практически невозможно реализовать в веб-приложениях, поэтому дизайнеры чувствуют себя разочарованными, обманутыми и совершенно бесполезными. Но сегодня все меняется. Ну, на самом деле это изменилось еще в 2018 году или что-то около того, это только я что нашел страницу MDN, но вы поняли суть.
Итак, вот как создать размытие фона с помощью свойства CSS backdrop-filter.
backdrop-filter: blur(5px);
Вот и все. Если вы все же хотите прочитать больше, вот немного подробнее…
Что такое backdrop-filter?
Согласно MDN: «Свойство backdrop-filterCSS позволяет применять графические эффекты, такие как размытие или смещение цвета, к области позади элемента. Поскольку это относится ко всему, что находится за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон хотя бы частично прозрачным».
Если вы ума не приложите, что они имели в виду в последнем предложении, то в основном они говорят, что это работает точно так же, как и в выбранном вами инструменте дизайна (Figma, Sketch, Adobe XD, Framer, что-нибудь еще).
Все, что скрывается за размытием… становится размытым.
Давайте возьмем простой пример
Начните с создания div с классом .background.
<div class="background"></div>
Хорошо, давай сделаем небольшой перерыв на кофе. Очистите свой мозг, а затем добавьте немного CSS для класса .background. Мы добавим красивое background-image с несколькими ананасами и сделаем так, чтобы оно покрывало всю страницу.
.background { background-image: url(https://source.unsplash.com/Q7PclNhVRI0); background-position: bottom; background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100%;
}Теперь давайте добавим размытие. Мы собираемся незаметно проникнуть внутрь этого div с классом .background и аккуратно поместить div с классом .blur.
<div class="background"> <div class="blur"></div> </div>
Мы сделаем так, чтобы наш класс .blur покрывал всю высоту окна, но только половину ширины, чтобы мы могли видеть разницу после применения фильтра.
Если вы хотите, чтобы размытие имело цвет, вам нужно добавить свойство background со значением rgba. Убедитесь, что альфа-канал (непрозрачность) меньше 1, чтобы мы могли видеть сквозь цвет.
Затем мы добавим магическое свойство CSS backdrop-filter и присвоим ему значение blur(8px). Подсказка: увеличьте / уменьшите px, чтобы увеличить / уменьшить размытие.
// Content we're putting a blur over
.background { background-image: url(https://source.unsplash.com/Q7PclNhVRI0); background-position: bottom; background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100%;
} // Background Blur using backdrop-filter
.blur { background: rgba(255, 255, 255, 0.2); // Make sure this color has an opacity of less than 1 backdrop-filter: blur(8px); // This be the blur height: 100vh; width: 50%;
}На полном серьезе, это очень круто.
Добавление нескольких фильтров
Если вы хотите добавить к элементу несколько свойств backdrop-filter, просто разделите их пробелами. Будьте осторожны; они могут не сочетаться вместе. И да, через точку с запятой после моей предыдущей статьи в Medium. Что происходит.
// Content we're putting a blur over
.background { background-image: url(https://source.unsplash.com/Q7PclNhVRI0); background-position: bottom; background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100%;
} // Background Blur using backdrop-filter
.blur { background: rgba(255, 255, 255, 0.2); // Make sure this color has an opacity of less than 1 backdrop-filter: blur(8px); // This be the blur height: 100vh; width: 50%;
} // Multiple filters
.multiple-filters { backdrop-filter: blur(20px) saturate(120%) contrast(200%);
}Вот мой пример на Codepen с анимацией и кнопкой для переключения класса, содержащего несколько свойств backdrop-filter:
Очевидно, вы можете применить к этому изобретательность. Это было экспериментальное свойство некоторое время, поэтому обязательно проверьте совместимость браузеров. На момент написания этой статьи MDN говорит, что все основные браузеры, за исключением Internet Explorer, Firefox для Android и Samsung Internet, используют его.
Героическим людям, которые сделали это возможным, искренняя благодарность от меня. Вы позволили, чтобы наши снимки на Dribbble имели гораздо больше шансов увидеть свет.
Надеюсь, что это базовое описание использования backdrop-filter для создания размытия фона поможет, по крайней мере, одному человеку. Пожалуйста, не стесняйтесь оставлять свои комментарии. Спасибо за чтение. Приятно провести время!
Автор: Andrew Nicholl
Источник: https://blog.prototypr.io
Редакция: Команда webformyself.