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

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

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

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

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

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

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

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

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

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

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

Рубрики: CSS

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

Bitrix подключить класс компонента

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

Подключить bitrix без подключения шаблона сайта

В статье приводится пример кода подключения bitrix без подключения шаблона сайта. Так же описано когда это может пригодится.

Bitrix подключить модуль

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

Bitrix сбросить буфер вывода

Функция RestartBuffer() в Bitrix используется для сброса буфера вывода. Она позволяет прервать вывод страницы на определенном этапе выполнения скрипта и начать вывод заново. В статье рассмотрим основные сценарии использования данной функции, рассмотрим пример кода.

PHP Удалить лишние нули после запятой

Когда в проекте диапазон чисел от 0,0001 до 1 000 000, удобно автоматически удалять лишнии нули после запятой.

Команда grep. Примеры использования

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

Комментарии

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