Grayscale filter css: grayscale() — CSS&colon; Cascading Style Sheets — Вебджем.рф

Содержание

Примеры CSS фильтров (CSS Filters) для работы с изображениями

Примеры CSS фильтров (CSS Filters)

Примеры пользовательских CSS фильтров:

CSS фильтры нужны для применения эффектов в графике как часть спецификации SVG. В эксклюзивной верстке сайтов иногда без CSS фильтров (CSS filter) не обойтись.

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

normal

grayscale(50%)

saturate(360%)

sepia(100%)

invert(100%)

opacity(50%)

brightness(120%)

contrast(160%)

hue-rotate(160deg)

blur(2px)

Примеры пользовательских CSS фильтров:

grayscale(значение)
Конвертирует цвета изображения (img) в черно-белые. Значение может задаваться как в процентах от 0% до 100%, так и в десятичных дробях от 0 до 1.

saturate(значение)
Задает насыщенностью цвета. Значение может быть как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

sepia(значение)

Делает эффект сепии. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

invert(значение)
Инвертирует цвета изображения. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

opacity(значение)
Устанавливает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1). Данный фильтр похож на CSS свойство opacity. Различие только в том, что фильтр поддерживает аппаратное ускорение, а свойство opacity — нет. Таким образом применение фильтра дает лучшую производительность при выводе объекта.

brightness(значение)
Смена яркости изображения. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

contrast(значение)
Смена контрастности изображения.

Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

hue-rotate(угол)
Смена цвета изображения в зависимости от заданного угла. Угол поворота определяет как изменится цвет в цветовом круге от красного до фиолетового. Значение в градусах (0deg — 360deg).

blur(радиус)
Эффект размытости изображения. Значение задается в пикселях px.

drop-shadow(x, y, радиус, цвет)
Формирует тень аналогично CSS свойству box-shadow, но только фильтр имеет поддержку аппаратного ускорения как и случае с opacity.

url(ссылка на SVG фильтр)
Создание собственных фильтров с помощью SVG элемента filter. Каждый фильтр имеет свой идентификатор — id.

custom (coming soon)
Возможность создавать свои собственные фильтры на CSS Shaders, но пока данная опция доступна не на всех браузерах.

Помогла ли вам статья?

351 раз уже помогла

Комментарии: (0)

Как изменить изображения с оттенков серого на цвет или наоборот при наведении курсора

1 сентября 2019 г. 20 ноября 2018 г. оттенки серого в цвет, когда они перемещают указатель мыши по изображению.

Чтобы этот эффект работал в старые времена, вам нужно было два изображения: одно в цвете и одно в градациях серого. В CSS или HTML вы бы создали правила, заменяющие одно изображение другим при наведении курсора.

В настоящее время для этого есть отличное свойство CSS, называемое фильтром. Свойство filter позволяет вам добавлять к изображению фильтр оттенков серого от 0 до 100% на лету.

Вот как вы можете использовать этот эффект на своем сайте.

Изменение изображений при наведении с цветных на оттенки серого

Во-первых, давайте изменим изображение с цветного на оттенки серого.

Я создаю класс с именем colortobw , который я могу добавить к блоку, содержащему изображение (или в данном случае изображения, поскольку я применяю его к галерее). Я не хочу применять класс ко всему блоку, а только к изображениям. Это означает, что в редакторе блоков WordPress мне нужно указать элемент, к которому я хочу применить класс, в данном случае изображение .

Код CSS выглядит следующим образом:

 .colortobw img {
-webkit-filter: оттенки серого (0) !важно;
фильтр: оттенки серого(0) !важно;
}
.colortobw изображение: наведение {
-webkit-filter: оттенки серого (100%) !важно;
фильтр: оттенки серого (100%) !важно;
}

Первое правило CSS — первые четыре строки — указывает состояние фильтра по умолчанию. В этом случае к изображению не применяются никакие оттенки серого

Можно было бы предположить, что будет достаточно только линии filter , но нет. Поскольку ваш сайт также посещают из браузеров, использующих движок браузера WebKit, а WebKit не признает filter , добавлено свойство -webkit-filter .

Кстати, в данном конкретном случае эти строки можно не включать. Изображения уже в цвете, и оттенки серого не применяются. Но выглядит более аккуратно, если они есть, чтобы указать, что что-то произойдет со свойством filter элемента.

Второе правило применяет к изображению 100-процентный фильтр оттенков серого, когда указатель мыши наводит на изображение. Это делает изображение полностью в градациях серого.

Затем добавьте класс colortobw

к изображениям или галерее, на которые вы хотите настроить таргетинг. Для этого выберите блок и перейдите в боковое меню. Нажмите Расширенный и введите имя в поле Дополнительный класс CSS , исключив точку перед именем .

А это результат этих строк кода CSS. Не забудьте навести на него указатель мыши, чтобы увидеть эффект:

Изменение изображений при наведении с оттенков серого на цветное

Теперь давайте изменим изображение с оттенков серого на цветное.

Конечно, вы не можете добавить реалистичный цвет к изображению в градациях серого, поэтому загружаемые изображения должны быть полноцветными. Решил упомянуть об этом только ради безопасности 😉

Затем я создаю класс bwtocolor . Код CSS выглядит так:

 .bwtocolor img {
-webkit-filter: оттенки серого (100%) !важно;
фильтр: оттенки серого (100%) !важно;
}
.bwtocolor img: hover {
-webkit-filter: оттенки серого (0) !важно;
фильтр: оттенки серого(0) !важно;
}

Как видите, назначение свойств противоположно приведенному выше коду.

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

Второе правило применяет к изображению фильтр оттенков серого со значением 0. Это означает, что фильтр оттенков серого не применяется, и изображение отображается в исходном состоянии: полноцветное.

Затем добавьте bwtocolor к изображениям или галерее, на которые вы хотите настроить таргетинг, как указано выше.

Результат выглядит следующим образом:

Если вы хотите изучить бесчисленное множество применений свойства фильтра CSS, посетите страницу на эту тему в W3Schools.

Используете ли вы фильтры в своем коде? Какой эффект вы применяете к элементу на своих страницах? Поделитесь своим опытом в комментариях ниже.

Новая функция: фильтры CSS | Блог Webflow

Теперь вы можете добавлять фильтры CSS к любому элементу в конструкторе Webflow.

Хавьер Чаварри

Ничего не найдено.

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

И хотя вы привыкли применять подобные фильтры к изображениям, вы можете применять фильтры CSS к любому элементу: кнопкам, тексту, видео — чему угодно!

Все новые параметры фильтра можно найти в разделе «Эффекты» на вкладке «Стиль»:

Вы найдете новые фильтры CSS в разделе «Эффекты» на вкладке «Стиль».

Каждый тип фильтра также дает вам значения, которые вы можете использовать для точной настройки эффектов, например, радиус для фильтра «Размытие».

Вот 8 совершенно новых фильтров CSS, которые вы можете применить в Designer:

1. Размытие

Применяет к элементу размытие по Гауссу. Увеличьте значение радиуса, чтобы сделать элементы еще более размытыми.

2. Поворот оттенка

Добавляет поворот оттенка к выбранному элементу, регулируя цвета элемента на основе значения угла: 0 градусов оставляет элемент нетронутым, а 180 переносит вас на противоположную сторону круга, а 360 вернет вас на круги своя. Максимальное значение — 1440 градусов, т. е. 4 раза по кругу.

3. Насыщенность

Насыщает выбранный элемент до степени, определяемой выбранным значением количества. Количество варьируется от 0 до 100+, что позволяет получить некоторые сверхнасыщенные результаты.

4. Яркость

Позволяет сделать элемент более или менее ярким. Значение 0% делает элемент полностью черным, а значение 100% оставляет элемент без изменений. Вы также можете установить яркость выше 100 %, чтобы добиться еще более ярких результатов.

5. Контраст

Регулирует уровень контрастности элемента, где 0 % соответствует полностью серому цвету, 100 % оставляет элемент без изменений, а значение выше 100 % создает сверхконтрастные эффекты.

6. Оттенки серого

Самый простой способ превратить цветную фотографию в черно-белый шедевр.

7. Сепия

Хотите придать своему сайту винтажный вид? Тогда фильтр Sepia для вас. Значения варьируются от 0% до 100%, поэтому вы можете контролировать, насколько винтажными будут ваши изображения.

8. Инвертировать

Инвертирует значения цвета в выбранном изображении, при этом 0 % оставляет изображение без изменений, а 100 % создает полностью инвертированные значения.

Раскройте свой творческий потенциал в Интернете

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

Начните бесплатно

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Начните бесплатно

3 творческих применения фильтров CSS

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

Вот только 3 идеи, которые мы придумали:

1. Добавление и изменение порядка нескольких эффектов

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

Не доволен результатом? Щелкните значок глаза, чтобы скрыть эффект, и, если вам нравится результат, щелкните значок корзины, чтобы избавиться от этого эффекта.

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

2. Применение различных эффектов к различным состояниям

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

Фильтр CSS, добавленный при наведении, — это творческий способ добавить интерактивности.

3. Отфильтруйте любые вещи

Вам не кажется, что стоковое видео достаточно «попсовое»? Просто подождите, пока вы не увидите, что он делает, когда вы поворачиваете его оттенок, инвертируете его цвета или создаете оттенки серого!

Вы даже можете добавлять фильтры CSS к видео!

Что вы будете делать с фильтрами CSS?

Нам не терпится увидеть, что вы создадите с помощью этой новой функции! Расскажите, что вы сделали с фильтрами, в комментариях ниже или твитните @webflowapp с хэштегом #MadeInWebflow.

Примечание редактора: когда мы впервые опубликовали этот пост, мы ошибочно заявили, что фильтры CSS могут использоваться во взаимодействиях. Сегодня единственное взаимодействие, с которым вы можете использовать фильтры CSS, — это состояние наведения кнопок и других ссылок. Мы рассматриваем возможность добавления интерактивной поддержки для фильтров CSS, но пока нет точных сроков. Мы будем держать вас в курсе!

Grayscale filter css: grayscale() — CSS: Cascading Style Sheets