От автора: используя изображения, мы можем создать атмосферу, вызвать счастье, улыбку, грусть или любую другую эмоцию. С помощью изображений мы можем многое показать, а также многое рассказать; именно поэтому изображения так широко используются на сайтах и в приложениях.
Дизайнеры заботятся о том, как пользователи будут воспринимать сайт и какие эмоции он будет вызывать. Графические дизайнеры могут использовать передовое программное обеспечение для редактирования фотографий и добавления к ним фильтры, маски или другие эффекты, которые определяют окончательный вид.
Иногда бывает так, что то, что было разработано дизайнером, сложно кодировать, и как разработчики мы обращаем внимание на производительность кода и хотим, чтобы сайты загружались быстро. Это часто означает, что мы должны уменьшить размер изображения. Это также причина, по которой мы предпочитаем воспроизводить эффекты, созданные дизайнером, используя код. Особенно, когда нам нужно добавить эффект при наведении или клике, мы не хотим загружать два изображения.
Мы можем использовать код для простого добавления фильтров к изображениям, например, с помощью CSS, и в этой статье я хотел бы показать вам, как вы можете использовать фильтры для создания потрясающего эффекта. Давайте начнем!
Фильтры в CSS
Чтобы создать фильтры для изображений в CSS, мы используем свойство filter, которое определяет визуальные эффекты, используя несколько различных функций. Каждая функция может дать различный результат для основного изображения. Также возможно добавить к одному изображению несколько фильтров.
Давайте рассмотрим, какой результат мы можем получить.
1. grayscale(% | number)
Самый популярный фильтр, добавляемый к изображениям — это оттенки серого. Он позволяет создавать черно-белые фотографии. Функция оттенков серого может принимать аргументы в процентах или числах. 0% означает, что ничего не изменится, а 100% означает, что изображение будет полностью преобразовано в оттенки серого. Если вы оставите значение пустым, оно по умолчанию будет 100%. Если вы хотите установить значение числом, оно может быть от 0 до 1.
В приведенном выше примере вы можете увидеть исходную фотографию без каких-либо фильтров, вторая — это изображение со значением 0,5, а последняя — полностью черно-белая фотография.
2. sepia(% | number)
Фильтр sepia создает красновато-коричневую цветную фотографию. Метод sepia() работает аналогично оттенкам серого; он также принимает значения от 0% до 100% или от 0 до 1. Отрицательные значения не допускаются. Давайте рассмотрим на примеры:
В примере выше вы можете увидеть, как работает фильтр сепия. Я думаю, что это хороший вариант для создания фотографий под ретро. Это то, что пришло мне в голову после просмотра изображения сепии.
3. blur(px)
Эффект размытия делает фотографию очень размытой, применяя эффект размытия по Гауссу. Это применимо к скрытым по соображениям цензуры фрагментов или фоновым изображениям, когда нет необходимости делать фотографию очень четкой. Метод blur() также принимает один аргумент — определенное количество пикселей. Чем больше значение — тем больше размытие. По умолчанию значение равно 0.
Первый пример — базовое изображение без фильтра, второй — с размытием в 2 пикселя, а в последнем практически невозможно распознать, что на фото.
4. brightness(% | number)
Еще один фильтр — brightness(), позволяющий регулировать уровень яркости картинки. Он принимает один параметр в процентах от 0% до 100% — чем выше значение, тем ярче изображение — или число от 0 до 1. По умолчанию яркость каждого изображения составляет 100%. Давайте посмотрим, как этот фильтр ведет себя на примере кода:
Изображения в примере имеют яркость от 0,5 и до 150%.
5. contrast(% | number)
Фильтр contrast() позволяет задать контрастность изображений. Если установлено значение 0% или число 0, оно будет полностью темным. По умолчанию установлено 100% или 1, что означает, что фотография не будет изменена вообще, а значения выше 100% или 1 задают меньшую контрастность. Давайте посмотрим на пример:
В приведенном выше коде я уменьшил контрастность первой картинки до 10%, а для второй фотографии задал 200%.
6. saturate(% | number)
saturate описывает интенсивность цветов, и чем больше значение фильтра, тем ярче цвета. Значение по умолчанию для изображения составляет 100% или 1, 0 означает, что изображение является ненасыщенным, а все значения выше 100% и 1 увеличивают насыщенность. Давайте посмотрим на пример:
Как вы можете видеть в примере, второе изображение ненасыщено, для него установлено 20%, а третье изображение имеет насыщенность 200%, и оно заметно ярче других.
7. hue-rotate(deg)
Во-первых, давайте сначала объясним, что такое поворот оттенка, потому что это может сбивать вас с толку. Как сбивало в свое время меня. Итак, поворот оттенка — это функция, в которой мы указываем угол на круговой диаграмме цветов. Он может указываться в градусах или оборотах. Он также принимает отрицательные значения. Максимальное значение составляет 360 градусов, поэтому даже если мы установим большее значение, оно будет работать, как в круге, например, если вы установите 450 градусов, результат будет такой же, как для 90 градусов, а если мы введем -10 градусов, результат будет аналогичен 350 градусов (360 градусов — 10 градусов). Давайте посмотрим на пример кода:
В приведенном выше примере вы можете видеть четыре изображения, первое из которых является оригинальным, без какого-либо поворота оттенка, оно выглядит так же как изображение с поворотом оттенка в 360 градусов. Для второго изображения установлено 90 градусов поворота оттенка, и видно, что зеленый здесь очень интенсивный. Третье изображение имеет 180 градусов, и в этом примере изображение более голубое, а последнее имеет -90 градусов (что аналогично 240 градусов), оно является более красноватым.
8. invert(% | number)
Еще один фильтр, который может быть применен к изображениям с использованием CSS — это invert. Он используется для инвертирования цветов на изображении. Значение, которое принимает функция invert, может быть только положительным. Давайте посмотрим на пример:
В приведенном выше коде вы можете видеть три изображения. Первое является оригинальным, следующее инвертируется до 75%, а последний полностью инвертируется (значение равно 1).
Заключение
Добавление фильтров к изображениям иногда весьма удобно, особенно если вы хотите добиться удивительного визуального эффекта.
В этой статье я представил 8 методов фильтров и описал значения, которые они принимают, чтобы вы могли просто взглянуть и узнать, какой фильтр применить, чтобы получить требуемый результат.
Я надеюсь, что вы найдете это полезным, также поделитесь своими любимыми методами фильтров в комментариях, или, может быть, вы создали какие-то потрясающие пользовательские фильтры? Дайте мне знать! Удачного кодирования!
Автор: Duomly
Источник: https://dev.to
Редакция: Команда webformyself.