Как сделать размытие картинки в css
Перейти к содержимому

Как сделать размытие картинки в css

  • автор:

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

К сожалению, пока не все браузеры поддерживают свойство backdrop-filter , поэтому эффект размытия будет виден не везде, но использование данного свойства не ломает верстку в других браузерах, просто нужно проверить, как будет выглядеть этот блок без эффекта размытия, и можно смело использовать

Свойство backdrop-filter имеет достаточно много других эффектов, которые можно посмотреть на MDN web docs

Как добавить картинке фильтры. CSS-свойство filter

CSS-свойство filter добавляет визуальные эффекты к элементам на странице. Например, вы можете поменять цвет, яркость и насыщенность элемента, наложить размытие или изменить прозрачность, инвертировать цвета или сделать что-то ещё.

Всего фильтров девять, и вот как они работают:

Как меняется фото при разных значениях filter

К каким элементам применять свойство filter

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

Заголовок размыт, а у текста понижена контрастность

Значения CSS-свойства filter

Значение свойства по умолчанию — none , то есть фильтр не выбран. Чтобы добавить эффект, нужно заменить none на любое из следующих значений.

blur — размытие элемента. Указывается в пикселях: filter: blur(5px) .

brightness — яркость элемента. Принимает значение от 0 до 100% . Например, filter: brightness(50%) уменьшит яркость элемента на 50%.

contrast — контрастность элемента, указывается в процентах. Например, filter: contrast(200%) увеличит контрастность элемента в два раза.

grayscale — оттенки серого. Принимает значение от 0 до 100% . Например, filter: grayscale(100%) сделает фото чёрно-белым.

hue-rotate — меняет оттенок элемента. Принимает значение в градусах. Например, filter: hue-rotate(90deg) повернёт оттенок элемента на цветовом круге на 90 градусов.

invert — инвертирует цвета элемента. Принимает значение от 0 до 100% . Например, filter: invert(90%) инвертирует цвета элемента на 90%.

opacity — прозрачность элемента. Принимает значение от 0 до 100% . Например, filter: opacity(50%) сделает элемент полупрозрачным.

saturate — насыщенность элемента. Принимает значение в процентах. Например, filter: saturate(200%) сделает цвета насыщеннее в два раза.

sepia — создаёт эффект старой фотографии. Принимает значение в процентах, например, filter: sepia(50%) .

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

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

Наследуется ли свойство filter

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

Материалы по теме

  • CSS-свойство color
  • CSS-свойство position
  • CSS-свойство height

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

  • 13 ноября 2023

Знакомство с CSS

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

  • 1 ноября 2023

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

  • 7 сентября 2023

Как сделать тёмную тему на сайте

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

  • 29 августа 2023

4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 

Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

  • 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

  • 28 июля 2023

CSS-свойство contain

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container
  • 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element
  • 13 июля 2023

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

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

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

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

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

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

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

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

HTML разметка

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

airline

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); // трансформирует фон в сторону увеличения
>

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

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

Эффект размытия и фокуса на 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;
>

.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 Русаков Михаил Юрьевич. Все права защищены.

    Функция 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 .

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

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

    • 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

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

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

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

    См. также

    • backdrop-filter
    • filter
    • Фильтр
    • Функция brightness()
    • Функция contrast()
    • Функция drop-shadow()
    • Функция grayscale()
    • Функция hue-rotate()
    • Функция invert()
    • Функция opacity()
    • Функция saturate()
    • Функция sepia()

    Рецепты

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

    Справочник 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-block
    • border-block-color
    • border-block-end
    • border-block-end-color
    • border-block-end-style
    • border-block-end-width
    • border-block-start
    • border-block-start-color
    • border-block-start-style
    • border-block-start-width
    • border-block-style
    • border-block-width
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-end-end-radius
    • border-end-start-radius
    • 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-start-end-radius
    • border-start-start-radius
    • 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-block-size
    • 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

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

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