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

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

Blur

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

img {
  filter: blur(5px);
}

Brightness

Фильтр brightness управляет яркостью изображения. Чтобы увеличить яркость изображения, примените следующий стиль CSS:

img {
  filter: brightness(150%);
}

Contrast

Фильтр contrast управляет контрастностью изображения. Чтобы увеличить контрастность изображения, используйте следующий стиль CSS:

img {
  filter: contrast(200%);
}

Drop-shadow

Фильтр drop-shadow создает тень для изображения. Чтобы применить этот фильтр, используйте следующий стиль CSS:

img {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

Grayscale

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

img {
  filter: grayscale(100%);
}

Hue-rotate

Фильтр hue-rotate изменяет цвет изображения. Чтобы повернуть оттенки цвета на 90 градусов, используйте следующий стиль CSS:

img {
  filter: hue-rotate(90deg);
}

Invert

Фильтр invert инвертирует цвета изображения. Чтобы применить этот фильтр, используйте следующий стиль CSS:

img {
  filter: invert(100%);
}

Opacity

Фильтр opacity управляет прозрачностью изображения. Чтобы сделать изображение полупрозрачным, используйте следующий стиль CSS:

img {
  filter: opacity(50%);
}

Saturate

Фильтр saturate управляет насыщенностью цвета на изображении. Чтобы увеличить насыщенность, используйте следующий стиль CSS:

img {
  filter: saturate(200%);
}

Sepia

Фильтр sepia преобразует изображение в оттенки коричневого цвета.

img {
  filter: sepia(100%);
}

Пример использования нескольких фильтров одновременно:

img {
  filter: grayscale(100%) contrast(200%) brightness(150%);
}

В этом примере изображение сначала преобразуется в оттенки серого, затем увеличивается контрастность и яркость.

Кроме перечисленных выше фильтров, существует еще множество других, таких как blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), и многие другие. Каждый из них может быть использован для создания уникальных эффектов на изображениях.

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

• CSS
• Вёрстка
• Дизайн