Разное

Фильтры css3: 8 CSS фильтров для изображений

16.12.1983

Содержание

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

Оригинал: 8 CSS image filters with code examples, автор Duomly

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

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

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

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

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

grayscale(% | число)

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

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

See the Pen Filters: grayscale() by Anna (@annafromduomly) on CodePen.

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

sepia(% | число)

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

Синтаксис и принцип работы функции

sepia() точно такой же, как у grayscale().

See the Pen Filters: sepia() by Anna (@annafromduomly) on CodePen.

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

blur(px)

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

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

See the Pen Filters: blur() by Anna (@annafromduomly) on CodePen.

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

brightness (% | число)

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

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

See the Pen Filters: brightness() by Anna (@annafromduomly) on CodePen.

У второй картинки в примере яркость снижена (

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

contrast(% | число)

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

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

See the Pen Filters: contrast() by Anna (@annafromduomly) on CodePen.

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

saturate(% | число)

Насыщенность изображения

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

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

See the Pen Filters: saturate() by Anna (@annafromduomly) on CodePen.

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

насыщенности).

hue-rotate(deg)

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

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

При использовании фильтра hue-rotate, каждый из исходных цветов будет сдвинут на указанный угол.

То есть при hue-rotate(90deg), красный станет оранжевым, желтый — синезеленым, а зеленый — синим (значения примерные).

See the Pen Filters: hue-rotate() by Anna (@annafromduomly) on CodePen.

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

invert(% | число)

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

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

See the Pen Filters: invert() by Anna (@annafromduomly) on CodePen.

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

Заключение

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

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

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).

5 CSS свойств для изображений, которые вам необходимо знать

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(181 голосов)

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

Однако, существуют другие свойства, которые используются не так часто и применяются непосредственно к изображениям (тегу <img />). Использование тега является наиболее предпочтительными способом размещения изображений на страницах.

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

Давайте рассмотрим каждый из них подробнее.

Усиление резкости изображений с image-rendering

Поддержка браузерами — 90,82% (на 11.2017)

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

Это широко поддерживаемое свойство контролирует алгоритм, применяемый браузером при масштабировании. Оно имеет 2 значения: crisp-edges и pixelated.

Значение crisp-edges удерживает цветовой контраст между пикселями. Другими словами, никакого сглаживания не производится, что отлично подходит для создания контраста.

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

Если вы внимательно посмотрите на края цветов на gif-изображении, представленном ниже, вы сможете увидеть разницу между изображениями: обычным и с примененным CSS-свойством image-rendering: pixelated.

CSS


img {
  image-rendering: pixelated;
}

Растягивание изображений с помощью object-fit

Поддержка браузерами — 89,7% (на 11.2017)

Значения contain, cover, fill похожи на аналогичные значения свойства background-size, которое указывает как фоновое изображение заполняет какой-либо элемент. Свойство object-fit очень похоже на упомянутое выше свойство background-size, так как оно также определяет размер изображения внутри его контейнера. Значение contain масштабирует изображение внутри контейнера. Cover делает тоже самое, но если соотношение сторон изображения и контейнера не совпадают, изображение обрезается. Fill заставляет изображение растягиваться и заполнять его контейнер. scale-down уменьшает изображение чтобы оно поместилось внутри контейнера.

HTML


<div>
  <img src="/rose.png' alt="rose flower'>
</div>

CSS


#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Сдвиги изображений с помощью object-position

Поддержка браузерами — 89,7% (на 11.2017)

Аналогично дополняющему background-position свойству background-size, существует свойство object-position, которое дополняет object-fit. Свойство object-position позволяет сдвинуть изображение внутри его контейнера. Координаты можно указывать в абсолютных и относительных величинах, использовать ключевые слова или комбинировать различные значения (top 20px right 5px, center right 80px).

HTML


<div>
  <img src="/rose.png' alt="rose flower'>
</div>

CSS


#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-position: 150px 0;
}

Выравнивание изображений с помощью vertical-align

Иногда мы добавляем тег <img /> (который по своей природе является строчным элементом) внутрь текста в качестве иллюстраций или для украшения. В таких случаях выравнивание изображений и текста в необходимом нам положении может стать сложной задачей, если вы не знаете какое свойство применить.

Свойство vertical-align применяется не только в ячейках таблиц. Оно также может выравнивать строчные элементы, родителями которых также являются строчные элементы, поэтому с его помощью мы можем выровнять изображение внутри строки текста. У этого свойства имеется довольно много значений, которые можно применить к строчным элементам, поэтому вам будет из чего выбрать.

HTML


<p>
PDF <img src="/pdf.png"
style="vertical-align:text-top" alt="Image">
</p>

Добавляем тень, используя filter: drop-shadow()

Тени, применяемые к тексту и блочным элементам, могут сделать ваши страницы более привлекательными. То же самое относится и к изображениям. Значения, которые передаются filter: drop-shadow() очень похожи на значения CSS-свойств для создания тени (text-shadow, box-shadow). Первые 2 указывают вертикальный и горизонтальный отступ тени от изображения, третий и четвёртый – степень размытия и радиус распространения тени, а последнее, пятое значение – цвет тени.

Как text-shadow и drop-shadow тень добавляется к объектам, к которым применяется этот фильтр. При использовании filter: drop-shadow() к изображениям во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Оригинал статьи — http://www.hongkiat.com/blog/img-css-properties/

Перевод: Матвей Земсков

Другие материалы в этой категории: « Flexbox Patterns: замечательные элементы пользовательского интерфейса на CSS Flexbox Nanoreset — самый маленький CSS reset размером менее 1 Кб »

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

  • Шаблон документа HTML5 (zip, 35. 41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)

Полезное