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

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

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

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

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

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

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

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

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

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

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

Рубрики: CSS

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

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

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

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

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

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

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

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

В статье приводится пример кода для получения директории в которой находится файл компонента.

Bitrix 24 получить ссылку на контакт, сделку, компанию, лид и т.д.

В статье приводится пример кода для получения ссылки на контакт, сделку, компанию, лид и т.д. с помощью метода \CCrmOwnerType::GetEntityShowPath()

Битрикс 24 удалить сделку

В статье приводятся способы удаления сделки.

Комментарии

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