Магия CSS: сделать изображение чёрно-белым

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

Пример использования

.example-bw {
	filter: grayscale(100%);
}

Как это выглядит (при наведении изображение станет цветным):

Как работает grayscale

Свойство filter в CSS позволяет применять различные визуальные эффекты к элементам, в том числе и к изображениям. Один из этих эффектов — grayscale, который принимает значение в процентах от 0 до 100. При значении 0% изображение остается в исходных цветах, а при 100% оно становится черно-белым.

Где это может пригодится?

  • Создание эффектов. Представьте эффект, когда при наведении курсора изображение оживает, возвращая свои цвета. Это создаст интерактивный и запоминающийся опыт для пользователей:
  • Фокус на Важном. Обесцвечивание помогает выделить текстовую информацию или другие значимые элементы, убирая отвлекающие цветовые акценты.
  • Дизайн. Черно-белые изображения способны привнести в дизайн страницы нотки утонченности и минимализма. Они могут подчеркнуть важные детали и придать сайту уникальный стиль.

Совместимость

Свойство filter: grayscale(100%); поддерживается большинством современных браузеров, включая Chrome, Firefox и другие.

Рубрики: CSS

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

CSS простой горизонтальный слайдер

В статье приводится пример кода для создания простого горизонтального слайдера с использованием CSS и небольшим количеством JS кода. Для реализации потребуется всего около 60 строк стилей и js кода.

Магия CSS: сделать изображение чёрно-белым

Узнайте, как использовать свойство CSS filter с параметром grayscale для создания черно-белых изображений. В статье написано как применять это свойство и есть наглядный пример его работы.

Пример использования chatGpt в работе: flex order

В этой статье мы рассмотрим реальный пример использования ИИ (chatGpt, gigachat,YandexGPT) в работе для решения вопрос по верстке (css)

CSS магия: стилизации элементов на основе нумерации

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

Оценка задач по верстке

В статье приведен список работ которые нужно учесть при оценке задач по верстке

Полезные библиотеки для web разработки

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

Комментарии

Комментариев пока нет
Данный сайт использует файлы cookies. Продолжая просмотр сайта, вы соглашаетесь с использованием файлов cookies.
ОК