Очень часто разные эффекты наведения на элементы 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. Мы также увидели список других встроенных функций фильтра для применения различных эффектов.
