Как размыть картинку в 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(‘../img/bg.jpg’);
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;
>

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

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

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

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

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

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

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

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

Создано 15.04.2020 10:35:54

Михаил Русаков

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

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

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

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

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

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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

Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

Как заблюрить фон css

Чтобы заблюрить фон с помощью CSS, вы можете использовать свойство backdrop-filter . Это свойство позволяет добавлять размытие к заднему плану элемента, на котором оно применяется.

Например, если вы хотите заблюрить задний фон элемента div , вы можете использовать следующий код:

div  backdrop-filter: blur(5px); > 

Здесь мы применяем размытие к заднему плану элемента div с помощью свойства backdrop-filter и устанавливаем радиус размытия в 5 пикселей с помощью функции blur() .

blur()

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

Синтаксис

filter: blur();

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS (к примеру: 5px). Чем больше значение, тем сильнее будет размыто изображение.

Отрицательное значение не допускается. Пустое значение воспринимается как 0px.

Песочница

img < filter: blur(>px); >

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Размытие фоновой фотографии

Примечание

Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter .

Спецификация

Спецификация	Статус
Filter Effects Module Level 1	Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

13

18

53

15

40

6

9.1

35

4.4

35

37

6.1

9.3

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Рецепты

• Как размыть изображение?
• Как размыть текст?
• Как размыть фоновую картинку?
• Как сделать картинку чёрно-белой?

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :buffering
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :link
• :muted
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :paused
• :placeholder-shown
• :playing
• :read-only
• :read-write
• :required
• :root
• :seeking
• :stalled
• :target
• :valid
• :visited
• :volume-locked
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• gap
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• row-gap
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

Размытие отдельных областей изображения в CSS

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

Сделаем это!

Компонент, который мы создадим в этом руководстве, основан на фреймворке CodyHouse.

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

Создаем копию изображения с помощью псевдоэлемента ::before , примененного к элементу .team__caption :

.team--blurred-img < .team__caption < overflow: hidden; &::before < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../../assets/img/img-01.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; filter: blur(8px); transform: scale(1.1); >> .team__name < background: alpha(var(--color-black), 0.6); padding: var(--space-sm); z-index: 1; >>

Устанавливаем background-position: center bottom ; и background-size: 100% auto; , чтобы копия изображения полностью перекрывала оригинал.

Используя идентификаторы, устанавливаем для каждого снимка разные background-image.

.team--blurred-img < // . #james < .team__caption::before < background-image: url('../../assets/img/img-01.jpg'); >> #emily < .team__caption::before < background-image: url('../../assets/img/img-02.jpg'); >> #mathew < .team__caption::before < background-image: url('../../assets/img/img-03.jpg'); >> #olivia < .team__caption::before < background-image: url('../../assets/img/img-04.jpg'); >> >

Мы используем .team__caption , поэтому копия изображения ограничивается этой областью. Также мы применили к этому элементу overflow: hidden , чтобы обрезать дочерние элементы, если их размеры превышают размеры контейнера своего.

После применения фильтра blur заметно, что края изображения стали полупрозрачны. Это можно исправить, создав дополнительную копию изображения с помощью псевдоэлемента ::after . А также увеличив размер псевдоэлемента ::before с помощью масштабирования через transform: scale.

.team--blurred-img < .team__caption < overflow: hidden; &::before, &::after < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; filter: blur(8px); >&::before < transform: scale(1.1); >> #james < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-01.jpg'); >> #emily < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-02.jpg'); >> #mathew < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-03.jpg'); >> #olivia < .team__caption::before, .team__caption::after < background-image: url('../../assets/img/img-04.jpg'); >> .team__name < background: alpha(var(--color-black), 0.6); padding: var(--space-sm); z-index: 1; >>

Также можно настроить таргетинг на браузеры, которые поддерживают свойство backdrop-filter . Это позволит реализовать размытие всего одной строкой кода.

К сожалению, на данный момент это свойство поддерживается не всеми браузерами. Поэтому мы решили использовать оба варианта.

браузерами. Поэтому мы решили использовать оба варианта. @supports (backdrop-filter: blur(10px)) < .team--blurred-img .team__caption < backdrop-filter: blur(10px); &::before, &::after < display: none; >> >

Готово! Теперь можно размыть еще больше изображений!

Вадим Дворников автор-переводчик статьи « How to create clipped, blurred background images in CSS »