Как сделать блюр бэкграунду css

CSS Magic #4. Блюр-эффект (css blur effect)

Привет! В четвертом выпуске CSS Magic расскажу, как сделать красивый блюр эффект для карточки. Поехали!

И так, сегодня мы будем делать блюр-эффект. Вот такого типа:

Пример блюр-эффекта

Сделать такое можно вполне несложно с помощью filter: blur() . Но, конечно, не все так просто 🙂 Начнем с разметки:

Разметка довольно тривиальная, единственное что тут нужно — это картинка и id для блока. Поехали к магии — CSS. Но сперва первичная разметка:

CSS (превичный)

Это базовые стили, которые просто делают карточку. Но они тоже важны, поэтому решил разделить.

CSS (сама магия)

Используем класс-модификатор block—blur . Для подписи (которая и будет блюрена) задаем overflow: hidden . Используем два псевдоэлемента ::before и ::after , в которых будет фон все той же картинкой. Благодаря background-position: center bottom и background-size: 100% auto выставляем ее как надо. И, конечно же filter: blur(8px) задает сам блюр-эффект.

Тут еще важный момент — как видите, ::before используется со скейлом. Это сделано для того, чтобы не было видно детали блюра от ::after . Если уберете скейл с ::before — думаю разницу увидите.

По традиции, пен:

Надеюсь, Вам было интересно. такой эффект я раньше очень долго искал, т.к. он мне нравится. Даже думал сделать на блог, но пока не дошли руки)

Эффект размытия и фокуса на CSS

Эффект размытия и фокуса на CSS

На этом уроке мы реализуем интересный эффект с фокусировкой размытого фона и размытия изображения при наведении в CSS.

При наведении на элемент (самолет), размытый фон масштабируется и приобретает фокус. Одновременно с фокусировкой фона, самолет размывается до состояния полупрозрачности. Таким образом взгляд пользователя фокусируется то на фоне, то на картинке.

до наведения:

Эффект размытия и фокуса на CSS.

при наведении:

Эффект размытия и фокуса на CSS.

HTML разметка

Создадим секцию на весь первый экран, внутри которой поместим блок с фоновым изображением и вставим картинку.

CSS стили

По умолчанию для всех элементов родителем служит тег body, относительно которого они позиционируются на странице. Мы изменим это правило и назначим родителем секцию, относительно которой будут позиционироваться остальные элементы. Кроме того, расположим все элементы внутри секции (фон и картинка) по центру.

.section <
position: relative; // устанавливаем родителя
overflow: hidden;
width: 100%; // ширина секции
height: 100vh; // высота секции на высоту окна
display: flex; // это flex-контейнер
justify-content: center; // горизонтальное выравнивание
align-items: center; // вертикальное выравнивание
>

Изначально наш фон будет размытым, для этого зададим свойство filter со значением blur с радиусом размытия в 10 пикселей.

.bg <
position: absolute;
top: 0;
left: 0;
width: 100%; // растянуть на всю ширину секции
height: 100%; // растянуть на всю высоту секции
background-image: url(&#039;../img/bg.jpg&#039;);
background-size: cover; // масштабируется без потери пропорций
filter: blur(10px); // размытие фона
transition: 2s; // плавный переход от размытия до получения фокуса
>

.airline <
width: 250px; // ширина картинки
height: auto; // высота картинки подстроится автоматически
position: relative; // для корректной работы z-index
z-index: 1; // слой с картинкой выше слоя с фоном
transition: 2s; // плавный переход эффекта размытия
>

Зададим стили, что должно происходить при наведении мыши на картинку с самолетом: изображение начнет размываться, увеличиваясь в размерах до полупрозрачного отображения.

.airline:hover <
filter: blur(10px); // радиус размытия
transform: scale(1.2); // масштабирование
opacity: 0.5; // полупрозрачность
cursor: pointer;
>

Когда мы наводим на самолет, данный селектор с тильдой выберет все соседние элементы, в нашем случае это фон и применит следующие свойства к фону. В результате получится эффект приближения фона и наведение резкости.

.bg <
filter: blur(0); // вернет фону резкость
transform: scale(1.5); // трансформирует фон в сторону увеличения
>

Усиление эффекта

Эффект можно еще больше усилить, если при наведении на самолет добавить проявляющийся текст.

Эффект размытия и фокуса на CSS.

.text <
position: relative;
color: transparent;
z-index: 2;
bottom: 30px;
transition: 2s;
font-size: 30px;
font-weight: 800;
font-family: Impact;
text-transform: uppercase;
>

.text <
transform: scale(1.5);
z-index: 2;
color: rgb(226, 43, 134);
>

Демонстрация эффекта размытия и фокусировки

Самостоятельно изучая HTML/CSS, наверняка вас должна заинтересовать тема по заработку сайтов на заказ. Основываясь на своем личный опыт, я записал пошаговое руководство по "Заработку на создании сайтов под заказ".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Как сделать размытие фона в CSS с помощью одной строки кода

Как сделать размытие фона в CSS с помощью одной строки кода

От автора: фоновые размытые изображения &#8212; это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы показываете им дизайн с размытым фоном. А это ложь.

Потому что размытия фона практически невозможно реализовать в веб-приложениях, поэтому дизайнеры чувствуют себя разочарованными, обманутыми и совершенно бесполезными. Но сегодня все меняется. Ну, на самом деле это изменилось еще в 2018 году или что-то около того, это только я что нашел страницу MDN, но вы поняли суть.

Итак, вот как создать размытие фона с помощью свойства CSS backdrop-filter.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вот и все. Если вы все же хотите прочитать больше, вот немного подробнее&#8230;

Что такое backdrop-filter?

Согласно MDN: «Свойство backdrop-filterCSS позволяет применять графические эффекты, такие как размытие или смещение цвета, к области позади элемента. Поскольку это относится ко всему, что находится за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон хотя бы частично прозрачным».

Если вы ума не приложите, что они имели в виду в последнем предложении, то в основном они говорят, что это работает точно так же, как и в выбранном вами инструменте дизайна (Figma, Sketch, Adobe XD, Framer, что-нибудь еще).
Все, что скрывается за размытием&#8230; становится размытым.

Давайте возьмем простой пример

Начните с создания div с классом .background.

Хорошо, давай сделаем небольшой перерыв на кофе. Очистите свой мозг, а затем добавьте немного CSS для класса .background. Мы добавим красивое background-image с несколькими ананасами и сделаем так, чтобы оно покрывало всю страницу.

Теперь давайте добавим размытие. Мы собираемся незаметно проникнуть внутрь этого div с классом .background и аккуратно поместить div с классом .blur.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Мы сделаем так, чтобы наш класс .blur покрывал всю высоту окна, но только половину ширины, чтобы мы могли видеть разницу после применения фильтра.

Если вы хотите, чтобы размытие имело цвет, вам нужно добавить свойство background со значением rgba. Убедитесь, что альфа-канал (непрозрачность) меньше 1, чтобы мы могли видеть сквозь цвет.

Затем мы добавим магическое свойство CSS backdrop-filter и присвоим ему значение blur(8px). Подсказка: увеличьте / уменьшите px, чтобы увеличить / уменьшить размытие.

На полном серьезе, это очень круто.

Добавление нескольких фильтров

Если вы хотите добавить к элементу несколько свойств backdrop-filter, просто разделите их пробелами. Будьте осторожны; они могут не сочетаться вместе. И да, через точку с запятой после моей предыдущей статьи в Medium. Что происходит.

Вот мой пример на Codepen с анимацией и кнопкой для переключения класса, содержащего несколько свойств backdrop-filter:

Очевидно, вы можете применить к этому изобретательность. Это было экспериментальное свойство некоторое время, поэтому обязательно проверьте совместимость браузеров. На момент написания этой статьи MDN говорит, что все основные браузеры, за исключением Internet Explorer, Firefox для Android и Samsung Internet, используют его.

Героическим людям, которые сделали это возможным, искренняя благодарность от меня. Вы позволили, чтобы наши снимки на Dribbble имели гораздо больше шансов увидеть свет.

Надеюсь, что это базовое описание использования backdrop-filter для создания размытия фона поможет, по крайней мере, одному человеку. Пожалуйста, не стесняйтесь оставлять свои комментарии. Спасибо за чтение. Приятно провести время!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *