• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Эффект размытия на изображение с помощью CSS3 (Внедрение эффекта размытия или фильтра на изображении на CSS)
Эффект размытия на изображение с помощью CSS3
Kosten
Дата: Среда, 31.01.2018, 20:22 | Сообщение 1
Администраторы
Сообщений:18095
Награды: 55


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

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

Разметка HTML

Начнем с создания разметки HTML. Определите два тега изображения с размытием класса CSS и blurGrey соответственно. Эти классы CSS также применяются к двум элементам заголовка H1. Таким образом, в случае наведения мыши на тег H1 или изображение, фильтр будет применен.

1.

Код
<h2>Эффект размытия</h2>
<img class="zornet_ru_sguneb" src="http://zornet.ru/_ld/85/07653147.jpg">

2.

Код
<h2>Эффект размытия 2</h2>
<img class="zornet_ru_molsagun" src="Ссылка изображение">

CSS

Свойство фильтра принимает встроенную функцию фильтра или пользовательскую функцию. Функция принимает значение, которое может быть в процентах или десятичном значении. Чтобы применить фильтр размытия, нам нужно передать функцию размытия с некоторыми значениями. В HTML один из элементов изображения и элемента H1 имеет размытый CSS-класс.

Поскольку мы хотим применить эффект размытия при наведении, поэтому: используется селектор hover. Внутри селектора hover передайте десятичное значение или процентное значение для функции размытия. Чем больше число, тем больше размытости будет.

1 версия

Код
.zornet_ru_sguneb {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zornet_ru_sguneb:hover {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}

2 версия

Вышеупомянутые классы CSS будут применять эффект размытия на изображениях. Свойство перехода CSS3 позволяет вам изменять значения свойств плавно от одного значения к другому в течение заданной продолжительности.

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

Код
.zornet_ru_molsagun {
-webkit-filter: blur(0);
filter: blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zornet_ru_molsagun:hover {
-webkit-filter: blur(3px);
filter: blur(3px);
}

Существуют другие встроенные функции фильтров для создания разных эффектов. Ниже приведен список всех встроенных функций фильтра.

1. яркость - настройка яркости.
2. контраст - настройка контрастности.
3. drop-shadow - применить эффект тени.
4. hue-rotate - Применяет поворот оттенка на изображении.
5. инвертировать - инвертировать образцы на изображении.
6. opacity - для управления непрозрачностью изображения.
7. saturate - насыщает изображение.
8. sepia - Нанести на изображение фильтр сепии (красновато-коричневого цвета).
9. url - для применения SVG-фильтров

1. Первая демонстрация:

2. Вторая демонстрация:

Вывод:

Чтобы подвести итог, мы только что научились применять фильтры CSS3 для создания эффекта размытия и серого на изображениях и элемент заголовка H1. Фильтры CSS3 похожи на фильтры Photoshop и могут быть легко реализованы с помощью нескольких строк кода CSS. Мы также увидели список других встроенных функций фильтра для применения различных эффектов.
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Эффект размытия на изображение с помощью CSS3 (Внедрение эффекта размытия или фильтра на изображении на CSS)
  • Страница 1 из 1
  • 1
Поиск: