Яркость для картинок css

8 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) , красный станет оранжевым, желтый — синезеленым, а зеленый — синим (значения примерные).

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

invert(% | число)

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

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

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

Заключение

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

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

Источник

brightness()

This example shows how to apply the brightness() filter to a paragraph via the backdrop-filter CSS property.

CSS

.container  background: url(image.jpg) no-repeat right / contain #d4d5b2; > p  backdrop-filter: brightness(150%); text-shadow: 2px 2px #ffffff; > 

.container  padding: 5rem 3rem 1rem; width: 30rem; > p  padding: 0.5rem; color: #000000; font-size: 2rem; font-family: sans-serif; > 

div class="container" style="background-image: url(be_fierce.jpg);"> p> Text on images can be illegible and inaccessible even with a drop shadow. p> div> 

Result

In this example, the colors in the area behind the

element shift linearly. If the backdrop-filter property was set to brightness(0%) , the area with the

element would have been black and hidden the image behind. At brightness(100%) , the area color would be the same as the input #d4d5b2 , and the image behind would be completely transparent. With the brightness set to 150% as in this example, the colors in the image behind are getting hidden by the brightness of the element.`

Applying brightness using the filter property

In this example, a brightness() filter is applied to the entire element, including content, border, and background image via the filter CSS property. The result shows three variations of different brightness values.

p:first-of-type  filter: brightness(50%); > p:last-of-type  filter: brightness(200%); > 

p  text-shadow: 2px 2px blue; background-color: magenta; color: palegoldenrod; border: 1em solid rebeccapurple; box-shadow: inset -5px -5px red, 5px 5px yellow; padding: 0.25rem; font-size: 1.25rem; font-family: sans-serif; width: 85vw; > 

p>This paragraph has reduced brightness.p> p>This paragraph has normal brightness.p> p>This paragraph has increased brightness.p> 

Applying brightness using the url() SVG brightness filter

In this example, to create a filter that darkens the content on which it is applied by 25% (i.e., 75% of the original brightness), the slope attribute is set to 0.75 . We can then reference the filter by id .

.filter  filter: brightness(0.75); > svg  position: absolute; > 

svg role="none"> filter id="darken25" color-interpolation-filters="sRGB"> feComponentTransfer> feFuncR type="linear" slope="0.75" /> feFuncG type="linear" slope="0.75" /> feFuncB type="linear" slope="0.75" /> feComponentTransfer> filter> svg> 

The following declarations produce similar effects:

filter: brightness(75%); filter: url(#darken25); /* with embedded SVG */ filter: url(folder/fileName.svg#darken25); /* external svg filter definition */ 

In the images below, the first one has a brightness() filter function applied, the second one has a similar SVG brightness function applied, and the third is the original image for comparison.

table cellpadding="5"> thead> tr> th>Live exampleth> th>SVG Equivalentth> th>Original imageth> tr> thead> tbody> tr> td>img class="filter" src="flag.jpg" alt="darkened pride flag" />td> td> img style="filter: url(#darken25)" src="flag.jpg" alt="darkened pride flag" /> td> td> img src="flag.jpg" alt="Pride flag" /> td> tr> tbody> table> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• CSS filter effects module
• The other functions available to be used in values of the filter and backdrop-filter properties include:
  • blur()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

  Found a content problem with this page?

  This page was last modified on Jul 17, 2023 by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  CSS фильтры

  CSS3-свойство filter позволяет применить фильтры к элементам, с помощью них можно инвертировать цвета, осветлить или затемнить элементы, полное описание на developer.mozilla.org.

  В данной статье представлены только основные фильтры по цвету, по мимо них есть наложение тени и фильтры с использованием SVG.

  Blur – размытие

  Размытие по Гауссу, значение задается в px или em, по умолчанию 0, отрицательные значения не допускается.

  Brightness – яркость

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

  Contrast – контраст

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

  Grayscale – обесцвечивание

  Обесцвечивание, значение от 0% до 100% или число от 0 до 1, отрицательное значение не допускается.

  Hue-rotate – замена цветов

  Замена цветов, в качестве значения указывается угол (deg) от 0 до 360, значение может быть отрицательным.

  Invert – инверсия цветов

  Инверсия цветов, значение от 0% до 100% или число от 0 до 1, отрицательное значение не допускается.

  Opacity – прозрачность

  Прозрачность элемента. Значение от 0% до 100% или от 0 до 1, по умолчанию 100%.

  Saturate – насыщенность

  Насыщенностью цветов, интенсивность задаётся положительным числом или процентами, по умолчанию 1 или 100%.

  Sepia – сепия

  Сепия или эффект старины, значение от 0% до 100%.

  Комментарии

  Другие публикации

  

  Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

  Источник