Содержание

8 CSS-фильтров изображений с примерами кода

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

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

Фильтры в CSS

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

1. Оттенки серого (% | число)

Самый популярный фильтр, добавленный к изображениям — это оттенки серого. Это позволяет создавать черно-белые фотографии. Функция оттенков серого может принимать аргументы в процентах или числах. 0% означает, что ничего не изменится, а 100% означает, что изображение будет полностью преобразовано в оттенки серого. Если вы оставите значение пустым, оно по умолчанию займет 100%. Если вы хотите установить значение по номерам, он принимает значения от 0 до 1.

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

2. Cепия (% | количество)

Фильтр сепия создает красновато-коричневую цветную фотографию. Метод sepia () работает аналогично градациям серого; он также принимает значения от 0% до 100% или от 0 до 1. Отрицательные значения не допускаются. Давайте посмотрим на примеры:

3. Размытие (px)

Эффект размытия применяет эффект размытия по Гауссу. Это применимо к цензуре или фоновому изображению, когда нет необходимости делать фотографию очень четкой. Метод blur () также принимает один аргумент, а аргумент должен иметь определенное количество пикселей. Самым большим значением будет большее размытие. По умолчанию значение равно 0.

Первый пример — базовое изображение без фильтра, второй — с размытием в 2 пикселя, а на последнем практически невозможно распознать, что на фото.

4. Яркость (% | число)

Еще один фильтр -brightness(), позволяющий регулировать уровень яркости картинки. Требуется один параметр в процентах от 0% до 100%. По умолчанию яркость каждого изображения составляет 100%. Давайте проверим, как этот фильтр ведет себя в примере кода:

Изображения в примере установлены на 0,5 и до 150%. Вы можете заметить чем меньшее число, тем более темные фотографии и наоборот.

5. Контраст (% | число)

Фильтр contrast() позволяет регулировать контрастность изображений. Если значение установлено в 0% или 0 числом, оно будет полностью темным, установлено 100% или 1, по умолчанию, что означает, что фотография не будет изменена вообще, а значения выше 100% или 1 обеспечат меньше контраста. Давайте посмотрим на пример:

В приведенном выше примере я уменьшил контраст первой картинки до 10% и увеличил контраст второй фотографии до 200%.

6. Насыщенность (% | число)

Насыщенность описывает интенсивность цветов, и чем больше значение насыщающего фильтра, тем ярче цвета. Значение по умолчанию для изображения составляет 100% или 1, 0 означает, что изображение является ненасыщенным, а все значения выше 100% и 1 увеличивают насыщенность. Давайте посмотрим на пример:

Как видно из примера, второе изображение ненасыщено и имеет значение 20% насыщенности, а третье изображение установлено на 200% насыщенности, и оно заметно более яркое.

7. Оттенок-поворот (градус)

Во-первых, давайте сначала объясним, что такое поворот оттенка. Итак, поворот оттенка — это функция, в которой мы указываем угол вокруг цветового круга. Вход может быть в градусах или оборотах. Он также принимает отрицательные значения. Максимальное значение составляет 360 градусов, поэтому даже если мы установим большее значение, оно будет работать, как в круге, например, если вы установите 450 градусов, результат будет такой же, как в 90 градусов, а если мы введем -10 градусов, результат будет если мы установим 350 градусов. Давайте посмотрим на пример кода:

В приведенном выше примере вы можете видеть четыре изображения, первое из которых является оригинальным, без какого-либо поворота оттенка. Второе изображение установлено на 90 градусов поворота оттенка, и видно, что зеленый здесь очень сильный. Третье изображение установлено на 180 градусов, и в этом примере изображение более голубое, а последнее, установленное на -90 градусов (что рассчитывается на 240 градусов), является более красноватым.

8. Инвертирование (% | число)

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

В приведенном выше коде вы можете увидеть три изображения. Первое является оригинальным, следующее инвертируется до 75%, а последнее полностью инвертируется (значение равно 1).

8 CSS фильтров для изображений – Telegraph

https://t. me/frontend_1

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

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

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

Фильтры в CSS

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

grayscale(% | число)

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

Функция grayscale принимает процентное значение «серости», где 0% означает, что картинка не будет изменена, а 100% соответствует полностью черно-белому изображению. Можно вместо процентов использовать доли единицы (0 = 0%, 0.5 = 50%, 1 = 100%).

В этом примере первое фото — совсем без фильтра. К второму применено свойство filter: grayscale(0.5), и оно на 50% черно-белое. Третье полностью черно-белое из-за свойства filter: grayscale(100%).

sepia(% | число)

Еще один популярный фильтр — сепия. Он похож на grayscale, только раскрашивает картинку не в серых, а в красно-коричневых тонах. Это дает очень приятный эффект «состаривания».

Синтаксис и принцип работы функции sepia() точно такой же, как у grayscale().

Пример демонстрирует, как работает этот фильтр. Первое изображение — оригинал без фильтров, второе имеет свойство filter: sepia(0.5), а третье — filter: sepia(100%).

blur(px)

Эффект «заблюривания» делает изображение размытым. Для этого используется алгоритм размытия по Гауссу. Может использоваться для «цензурирования» или для маловажного фонового изображения с целью отвлечения внимания.

Функция blur() в CSS принимает всего один аргумент — количество пикселей. Чем оно больше, тем сильнее размытие. Значение по умолчанию равно 0 (полное отсутствие размытия).

Первое изображение в примере как всегда без фильтра, второе имеет небольшое размытие (2px), а последнее размыто очень сильно (10px), так что картинку почти невозможно различить.

brightness (% | число)

Фильтр brightness() позволяет управлять уровнем яркости изображения.

Его синтаксис нам уже знаком — это процентное значение или десятичная дробь. Изначально каждое изображение имеет 100%-ную яркость. Ее можно как уменьшать (до 0%), так и увеличивать.

У второй картинки в примере яркость снижена (filter: brightness(0.5)), а у третьей — увеличена до 150%. Чем меньше значение, тем темнее изображение, и наоборот.

contrast(% | число)

Фильтр contrast(), как следует из названия, управляет уровнем контрастности.

Его синтаксис и принцип работы точно такой же, как у функции brightness().

В примере контраст второй картинки снижен до 50%, а третьей — увеличен до 200%.

saturate(% | число)

Насыщенность изображения — это степень интенсивности цветов, составляющих его. Чем больше значение насыщенности, тем «красочнее» картинка.

Управлять насыщенностью в CSS можно с помощью функции saturate(), синтаксис которой аналогичен brightness() и contrast().

Вторая картинка в примере кажется тусклой по сравнению с оригиналом (filter: saturate(0.2)), а третья — более красочной (200% насыщенности).

hue-rotate(deg)

Параметр hue rotate соответствует величине угла на цветовом круге. Он выражается в градусах или радианах и принимает значения от 0deg до 360deg. Вы также можете указать меньшее (отрицательное) или большее значение, но оно в любом случае будет приведено к диапазону 0-360 (в градусах).

Каждый цвет на картинке соответствует определенному углу на цветовом круге. Например, красный — это 0 (или 360) градусов, желтый — 120 градусов, а зеленый — 180.

При использовании фильтра hue-rotate, каждый из исходных цветов будет сдвинут на указанный угол. То есть при hue-rotate(90deg), красный станет оранжевым, желтый — синезеленым, а зеленый — синим (значения примерные).

https://codepen. io/annafromduomly/pen/mddqLVb

Исходное изображение представлено в близких друг к другу желто-зеленых тонах, поэтому смещение оттенка равномерное по всей картинке. Поворот на 90deg в первом изображении смещает общий тон в зеленую часть спектра, на 180deg — в синюю, а на 270deg (-90deg — это то же самое, что 270) — в красную.

invert(% | число)

Еще один фильтр для работы с изображениями из CSS — инвертирование цветов (создание негатива).

Функция invert() принимает процентное значение от 0% до 100% (или от 0 до 1). 0% — исходное изображение, 100% — полный негатив.

Второе изображение в примере инвертировано на 75%, а третье является полным негативом.

Заключение

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

В статье было рассмотрено 8 функций фильтрации, но на самом деле их чуть больше. Еще есть opacity(), управляющая прозрачностью, и drop-shadow(), создающая тень. Они не разобраны детально, так как не взаимодействуют непосредственно с цветами изображения.

источник

8 фильтров изображений CSS с примерами кода

Содержание:

Используя изображения, мы можем создать атмосферу, вызвать радость, улыбку, грусть или любую другую эмоцию. С помощью изображений мы можем многое показать и многое рассказать; Вот почему изображения так широко используются на веб-сайтах и ​​в приложениях.

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

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

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

Начнем!

Фильтры в CSS

Чтобы создать фильтры для изображений в CSS, мы используем свойство filter, которое определяет визуальные эффекты с помощью нескольких различных функций. Каждая функция может давать разные результаты для основного изображения. Кроме того, к одному изображению можно добавить несколько фильтров.

Давайте пройдемся по очереди и посмотрим, что может получиться.

1. оттенки серого (% | число)

Самый популярный фильтр, добавляемый к изображениям, — оттенки серого. Это позволяет создавать черно-белые фотографии. Функция оттенков серого может принимать процентный или числовой аргумент. 0% означает, что ничего не изменится, а 100% означает, что изображение будет полностью преобразовано в оттенки серого. Если вы оставите значение пустым, по умолчанию оно будет равно 100%. Если вы хотите установить значение цифрами, оно принимает значения от 0 до 1.

В приведенном выше примере вы видите исходную фотографию без каких-либо фильтров, вторую — изображение со значением 0,5, а последнюю — полностью полутоновую фотографию.

2. сепия(% | число)

Фильтр сепия создает красновато-коричневую цветную фотографию. Метод sepia() работает аналогично оттенкам серого; он также принимает значения от 0% до 100% или от 0 до 1. Отрицательные значения не допускаются. Давайте посмотрим на примеры:

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

Это первое, что пришло мне в голову после просмотра изображения сепии.

3. размытие (px)

Эффект размытия делает фотографию очень нечеткой за счет применения эффекта размытия по Гауссу. Это применимо к цензуре или фоновому изображению, где нет необходимости делать фотографию очень резкой. Метод blur() также принимает один аргумент, и этот аргумент должен содержать определенное количество пикселей. Чем больше значение, тем больше будет размытие. По умолчанию значение равно 0,

.

Первый пример — простое изображение без фильтра, второй — с размытием в 2 пикселя и немного размытым, а на последнем почти невозможно распознать, что на фото.

4. яркость(% | число)

Еще один фильтр — яркость(), который позволяет регулировать уровень яркости изображения. Он принимает один параметр в процентах от 0% до 100%, а все, что выше, делает изображение ярче или в виде числа от 0 до 1 или выше, чтобы сделать его ярче. По умолчанию яркость каждого изображения составляет 100%. Проверим, как ведет себя этот фильтр на примере кода:

Для изображений в примере установлено значение 0,5 и 150 %. Вы можете заметить, чем меньше число, тем темнее фотографии, и наоборот.

5. контраст(% | число)

Фильтр convert() позволяет регулировать контрастность изображений. Если значение установлено на 0% или 0 число, будет полностью темно, по умолчанию установлено значение 100% или 1, что означает, что фотография вообще не будет изменена, а значения выше 100% или 1 обеспечат меньше контраста. Давайте посмотрим на пример:

В приведенном выше примере я уменьшил контрастность первого изображения до 10% и увеличил контрастность второго фото до 200%.

6. насыщение(% | число)

Насыщенность описывает интенсивность цветов, и чем больше значение фильтра насыщенности, тем ярче цвета. Значение изображения по умолчанию — 100% или 1, 0 означает, что изображение ненасыщенное, а все, что выше 100% и 1, увеличивает насыщенность. Давайте посмотрим на пример:

Как вы можете видеть в примере, второе изображение ненасыщенное и установлено на 20% насыщенности, а третье изображение установлено на 200% насыщенности, и оно заметно более яркое.

7. оттенок-поворот (градус)

Во-первых, давайте сначала объясним, что такое hue-rotate, потому что это может сбивать с толку. Это было для меня. Итак, hue-rotation — это функция, в которой мы указываем угол вокруг цветового круга. Ввод может быть в градусах или оборотах. Он также принимает отрицательные значения. Максимум 360 градусов, поэтому даже если мы установим большее значение, оно работает как в круге, например, если вы установите 450 градусов, то результат будет как в 90 градусов, а если мы поставим -10 градусов, результат будет как если мы установим 350 градусов (то есть 360 градусов — 10 градусов). Давайте посмотрим на пример кода:

В приведенном выше примере вы можете видеть четыре изображения, первое из которых оригинальное, без поворота оттенка, но так же выглядит поворот оттенка на 360 градусов. Второе изображение настроено на поворот оттенка на 90 градусов, и видно, что зеленый здесь очень силен. Третье изображение установлено на 180 градусов, и в этом примере изображение более синее, а последнее, установленное на -90 градусов (расчетное значение 240 градусов), более красноватое.

8. инвертировать(% | число)

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

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

Заключение

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

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

Я надеюсь, что вы найдете это полезным, также поделитесь своими любимыми методами фильтрации в комментариях, или, может быть, вы создаете какие-нибудь потрясающие собственные фильтры? Дайте мне знать!

Приятного кодирования!

Учебник по CSS Grid

Шпаргалка по Flexbox — 12 советов и приемов, которые должен знать каждый веб-разработчик

Анна Данилек

Анна Данилек получила высшее образование в области управления бизнесом. В течение многих лет она получала солидный опыт во фронтенд- и бэкенд-разработке, создавая программное обеспечение для известных ИТ-компаний. Ее опыт в области ИТ — это React.JS, Angular, React Native, Flutter, Node.JS и Nest.JS. В последние годы она вела бизнес для Duomly, уделяя особое внимание ИТ, а также онлайн-маркетингу, дизайну и созданию контента, например, ведению блогов и YouTube. В нерабочее время Анна ведет свой настоящий криминальный канал на YouTube, любит спорт, солнце и средиземноморскую кухню.

Подробнее об Анне Данилец

Если вам понравилось, поделитесь и прокомментируйте!

Генератор фильтров CSS — создавайте CSS и делитесь фильтрами CSS и наложениями в режиме смешивания и наложения

Генератор фильтров CSS — создавайте фильтры CSS и делитесь фильтрами CSS и наложениями в режиме смешивания и наложения

Javascript отключен. Этот сайт не будет работать без Javascript. Пожалуйста, посетите enable-javascript.com для более подробной информации

Предупреждение Internet Explorer:

Похоже, вы используете Internet Explorer. Этот веб-сайт не работает в Internet Explorer, поскольку он использует современные функции CSS3. Пожалуйста, используйте FireFox, Chrome или Opera. При использовании этих фильтров имейте в виду изящный запасной вариант для устаревших пользователей IE 🙂

Похоже, ваш браузер устарел и не будет работать на этом веб-сайте. Список обновленных браузеров см. на сайте updatemybrowser.org.

Версия 1.2.1 — Единственный генератор фильтров CSS с возможностью переупорядочивания!

  • ↕ Размытие:

  • ↕ Яркость:

  • ↕Контраст:

  • ↕ Оттенки серого:

  • ↕ Цветовой поворот:

  • ↕ Инверсия:

  • ↕ Непрозрачность:

  • ↕ Насыщенность:

  • ↕ Сепия:

Префиксы браузера

HTML: