Как сделать картинку размытой css
Как сделать размытие фона в CSS с помощью одной строки кода
Дата публикации: 2020-03-26
От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы показываете им дизайн с размытым фоном. А это ложь.
Потому что размытия фона практически невозможно реализовать в веб-приложениях, поэтому дизайнеры чувствуют себя разочарованными, обманутыми и совершенно бесполезными. Но сегодня все меняется. Ну, на самом деле это изменилось еще в 2018 году или что-то около того, это только я что нашел страницу MDN, но вы поняли суть.
Итак, вот как создать размытие фона с помощью свойства CSS backdrop-filter.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Вот и все. Если вы все же хотите прочитать больше, вот немного подробнее…
Что такое backdrop-filter?
Согласно MDN: «Свойство backdrop-filterCSS позволяет применять графические эффекты, такие как размытие или смещение цвета, к области позади элемента. Поскольку это относится ко всему, что находится за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон хотя бы частично прозрачным».
Если вы ума не приложите, что они имели в виду в последнем предложении, то в основном они говорят, что это работает точно так же, как и в выбранном вами инструменте дизайна (Figma, Sketch, Adobe XD, Framer, что-нибудь еще).
Все, что скрывается за размытием… становится размытым.
Давайте возьмем простой пример
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Если вы хотите, чтобы размытие имело цвет, вам нужно добавить свойство 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 для создания размытия фона поможет, по крайней мере, одному человеку. Пожалуйста, не стесняйтесь оставлять свои комментарии. Спасибо за чтение. Приятно провести время!
Автор: Andrew Nicholl
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Размытие изображений по Гауссу с помощью SVG
В этом топике я хотел бы рассказать, как добавить изображениям на веб странице эффект размытия по Гауссу без использования флеша. Статью я планировал написать еще год назад, и, к моему большому удивлению, меня никто не опередил, хотя тема достаточно проста и интересна как с точки зрения веб дизайна, так и с точки зрения клиентской разработки. Для создания эффекта будем использовать уже ставшую популярной технологию SVG, которая работает во всех последних версиях браузеров. Для IE8- воспользуемся CSS фильтрами (Blur в частности), которые работают только в продуктах Microsoft. Для начала, предлагаю ознакомиться с итоговым вариантом здесь (наведите на любое изображение). Скрипт представлен в виде jQuery плагина, но выдернуть его для использования вне jQuery не составит труда.
Очевидно, целью работы являетя не только размытие картинки, а и анимация этого размытия.
Из простейшего примерамы видим, что интенсивность размытия зависит от атрибута stdDeviation в теге feGaussianBlur.
svg width =»100%» height =»100%» version =»1.1″
xmlns =»http://www.w3.org/2000/svg» >
defs >
filter id =»Gaussian_Blur» >
feGaussianBlur in =»SourceGraphic» stdDeviation =»3″/>
filter >
defs >
ellipse cx =»200″ cy =»150″ rx =»70″ ry =»40″
style =»fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)»/>
(код взят отсюда).
Первым делом я попробовал анимировать этот атрибут, но, как оказалось, значения атрибута могут быть только целыми числами, то есть анимация получалась “дерганная”. Для создания иллюзии плавной анимации, будем следовать очень простой логике.
Делаем два слоя: первый — размытое изображение (SVG), второй — исходное изображение (обычный html img), и меняем ему прозрачность, которая прекрасно анимируется. Для того, чтоб избежать проблем с позиционированием элементов относительно друг друга, было поставлено требование: исходное изображение должно содержаться в контейнере, например, в теге span, в который далее будет добавлена и размытая картинка.
span class =»blurImageContainer» >
img class =»blurImage» src =»a.jpg» >
span >
if (attrs) <
SVG.setAttr(element, attrs);
>
return element;
>,
Это всё, что нам понадобится для корректного создания нескольких svg элементов.
Для того чтоб не допустить ошибки многоразового применения плагина к одному и тому же элементу, каждый раз будем удалять элемент с размытием, а для этого нам нужно его как-то идентифицировать. К сожалению, добавить класс к самому svg элементу не удалось, зато получилось присвоить ему айдишник:
Это позволит нам так же избежать конфликта айдишников фильтра размытия, на который ссылается изображение.
В итоге мы получаем следующий код:
//ширина и высота искомого изображения
width: imgWidth,
height: imgHeight,
id: ‘blurred’ +blurredId
>);
//ширина, высота и адрес искомого изображения
width: imgWidth,
height: imgHeight,
href: imgSrc,
style: ‘filter:url(#’ +filterId+ ‘)’ //ссылка на фильтр
>);
svg xmlns =»http://www.w3.org/2000/svg» version =»1.1″ width =»144″ height =»144″ id =»blurred0.9918661566916853″ >
filter id =»blur0.9918661566916853″ >
feGaussianBlur in =»SourceGraphic» stdDeviation =»2″ > feGaussianBlur >
filter >
image x =»0″ y =»0″ width =»144″ height =»144″ href =»a.jpg» style =»filter:url(#blur0.9918661566916853)» > image >
svg >
Теперь приступим к размытию в IE ранних версий. Как говорилось выше, будет использоваться фильтр Blur. Получаемое размытие не совсем по Гауссу, да и выглядит не очень, но это не столь важно. Придерживаемся аналогичного принципа: создаем второе изображение, кладем его под исходное, размываем.
$( ‘.blurImageContainer’ ).gaussianBlur( <
deviation: 3, //уровень размытия
imageClass: ‘blurImage’ //класс искомого изображения
>);
Спасибо за внимание.
Прошу сообщать о любых неточностях и недочетах.
P. S. В процессе работы, была предпринята попытка научиться размывать не только картинки, но и целые куски html. Не смотря на то, что встроить html в svg (именно так) не составляет труда, применить графические фильтры не удалось. Буду рад, если уважаемые хабралюди помогут с идеей, как это сделать.
Оформление изображений на CSS3
При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.
Смотреть демо
Проблема
Из приведенного ниже примера становится понятно, с какими трудностями мы можем столкнуться при применении css-свойств на изображении. Кроме того каждый браузер отображает готовый элемент по-своему. Firefox не хочет делать углы скругленными, но тень к элементу добавляет, а Chrome или Safari отказываются делать и то и другое. 
Решение
Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.
Добавление динамики
Для добавления динамики нужно использовать небольшой jQuery скрипт, который будет оборачивать исходное изображение в тег span со стилем image-wrap. Так же применение скрипта сделает наше исходное изображение фоновым и задаст его ширину и высоту.
После применения мы получим следующий результат:
Примеры (смотреть демо)
Теперь, когда изображение используется в качестве фона, к элементу можно добавить любой стиль. Ниже приведены примеры скругления углов у изображений, создание эффекта окружности, добавление теней и другие приемы оформления.
Эффект окружности
Простой эффект с созданием окружности.
Скругленные углы
Пример со скругленными углами и добавлением тени.
Рельефный стиль
Добавление небольшого выступа (рельефа) в нижней части изображения.
Рельефный стиль со сглаживанием
Тот же эффект, но с размытием нижней границы в 1px.
Врезанный стиль
Используя свойство box-shadow можно делать эффект врезанного в плоскость изображения.
Морфинг и подсветка
В этом примере добавляется свойство transition. При наведении мыши происходит подсветка изображения и изменение его формы до окружности. Эффект подсветки создается благодаря свойству box-shadow.
Эффект глянца
Пример с наложением градиента на верхнюю часть изображения. Достигается за счет использования псевдоэлемента :after.
Эффект отражения
Еще один пример с использованием градиента, но на этот раз для создания эффекта отражения.
Глянец и отражение
Комбинирование двух выше описанных эффектов.
Эффект ленточки
Использование псевдоэлемента :after для создания эффекта ленточки в верхней части изображения.
Морфинг и тонирование
При наведении указателя мыши на картинку мы добавляем радиальный градиент используя псевдоэлемент :after.
Эффект окружности с размытием краев
Радиальный градиент можно также использоваться в качестве маски для создания эффекта сглаженных краев.
Эффект размытия изображения с помощью HTML5
С помощью элемента canvas можно размывать изображения при переходе от одного к другому, создавая отличный визуальный эффект. В уроке используется скрипт Stack Blur, который выполняет быстрое размытие изображения по Гауссу.
Как работает?
В основе идеи лежит добавление изображений в структуру документа, которые являются фоном. Также добавляются элементы canvas с размытой версией изображений. При навигации будет добавляться еще один элемент canvas с размытым вариантом перед текущим изображением, которое постепенно убирается с экрана. Размытая версия элемента canvas становится видна, и можно либо выводить новое изображение сразу в четком виде, либо постепенно повышать резкость для него.
Можно выбирать два варианта поведения:
Полный код смотрите в исходниках. Они снабжены переведенными комментариями.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/
Перевел: Сергей Фастунов
Урок создан: 21 Ноября 2011
Просмотров: 43768
Правила перепечатки
5 последних уроков рубрики «Для сайта»
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.
Оформление изображений на CSS3
При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.
Смотреть демо
Проблема
Из приведенного ниже примера становится понятно, с какими трудностями мы можем столкнуться при применении css-свойств на изображении. Кроме того каждый браузер отображает готовый элемент по-своему. Firefox не хочет делать углы скругленными, но тень к элементу добавляет, а Chrome или Safari отказываются делать и то и другое.
Решение
Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.
Добавление динамики
Для добавления динамики нужно использовать небольшой jQuery скрипт, который будет оборачивать исходное изображение в тег span со стилем image-wrap. Так же применение скрипта сделает наше исходное изображение фоновым и задаст его ширину и высоту.
После применения мы получим следующий результат:
Примеры (смотреть демо)
Теперь, когда изображение используется в качестве фона, к элементу можно добавить любой стиль. Ниже приведены примеры скругления углов у изображений, создание эффекта окружности, добавление теней и другие приемы оформления.
Эффект окружности
Простой эффект с созданием окружности.
Скругленные углы
Пример со скругленными углами и добавлением тени.
Рельефный стиль
Добавление небольшого выступа (рельефа) в нижней части изображения.
Рельефный стиль со сглаживанием
Тот же эффект, но с размытием нижней границы в 1px.
Врезанный стиль
Используя свойство box-shadow можно делать эффект врезанного в плоскость изображения.
Морфинг и подсветка
В этом примере добавляется свойство transition. При наведении мыши происходит подсветка изображения и изменение его формы до окружности. Эффект подсветки создается благодаря свойству box-shadow.
Эффект глянца
Пример с наложением градиента на верхнюю часть изображения. Достигается за счет использования псевдоэлемента :after.
Эффект отражения
Еще один пример с использованием градиента, но на этот раз для создания эффекта отражения.
Глянец и отражение
Комбинирование двух выше описанных эффектов.
Эффект ленточки
Использование псевдоэлемента :after для создания эффекта ленточки в верхней части изображения.
Морфинг и тонирование
При наведении указателя мыши на картинку мы добавляем радиальный градиент используя псевдоэлемент :after.
Эффект окружности с размытием краев
Радиальный градиент можно также использоваться в качестве маски для создания эффекта сглаженных краев.