Размытый фон на CSS и другие backdrop-filter
Дизайнеры любят размытый фон. И дело легко решалось бы вставкой сразу размытой картинки. Но не тут-то было. Картинка должна меняться или при наведении переставать быть размытой. Грузить 2 картинки это слишком жестоко. Так нам приходилось поступать раньше. Но теперь можно сделать всё хорошо всего одной строчкой в CSS
backdrop-filter: blur(5px);
Вот ссылка на MDN
CSS свойство backdrop-filter позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.
Теперь к делу!
Зададим фоновую картинку для body или для любого блока. Поверх сделаем другой блок, например, с классом.text
, пропишем ему размеры так, чтобы он занимал только какую-то часть блока,чтобы было видно каким был изначальный фон и что произошло потом. Чтобы увидеть размытие, верхнему блоку нужно задать фоновый цвет в формате, поддерживающем альфа-канал. Я возьму полупрозрачный белый в таком виде:background: #fff5;
.
И теперь осталос добавить волшебное свойствоbackdrop-filter
со значениемblur(10px)
. Чем больше число, тем сильнее степень размытия.
Другие функции backdrop-filter
Кроме размытия у свойства backdrop-filter есть и другие возможности:
/* фильтр URL в SVG */
backdrop-filter: url(commonfilters.svg#filter);
/* значения функции фильтра */
backdrop-filter: blur(2px); /* размытие*/
backdrop-filter: brightness(60%); /* яркость */
backdrop-filter: contrast(40%); /* контраст */
backdrop-filter: drop-shadow(4px 4px 10px blue); /* тень, но в отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом. */
backdrop-filter: grayscale(30%); /* тона серого */
backdrop-filter: hue-rotate(120deg); /* поворот цвета */
backdrop-filter: invert(70%); /* инверсия */
backdrop-filter: opacity(20%); /* прозрачность */
backdrop-filter: sepia(90%); /* сепия (эффект старинных фотографий) */
backdrop-filter: saturate(80%); /* насыщенность */
К элементу можно применить одновременно несколько функций
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
Просто скопируйте следующий код: