Черно белый фильтр css

Черно белый фильтр css

Привет. Сегодня уже никого не удивишь красивыми эффектами на сайтах. Некоторые вот уже последние 10 лет делают это на Flash, другие — ещё не перестали делать на Javascript, но самые продвинутые уже давно используют CSS3. Вот этим мы сегодня и займемся.

Научимся как обесцветить картинку CSS (Grayscale image css), и сделаем это красиво

Итак, начнем с простого, нам нужны красивые фото, возьмём вот такое:

Нам нужно его обесцветить (обесцветить картинку CSS — убрать цвета, сделать картинку черно-белой). Для этого (да и вообще для работы с графикой) в CSS3 есть специальное средство filter.

Вот его мы и применим.

Решение: обесцветить картинку CSS

Сначала сверстаем саму картинку:

Затем пропишем для картинки стиль:

Теперь наша картинка станет черно-белой.

Можно, конечно, на этом остановится, но гораздо интереснее, когда картинка ещё и отвечает на действия пользователя.

Предлагаю сделать так, чтобы при наведении на картинку, она плавно становилась цветной.

На самом деле, сделать это совсем не сложно, и вовсе не обязательно знать Javascript.

Анимировать обесцветить картинку CSS

Немного дополним наш предыдущий стиль:

Это позволит картинке при наведении на неё мышкой, становится цветной. А ещё восмользуемся CSS3 transition, чтобы сделать процесс обесцвечивания анимированным:

Параметр all в transition говорит, что правило будет работать для всех стилей, а второй параметр — время анимации.
В первый параметр можно указать определённое свойство (например height, чтобы анимировать только высоту), а во второй время в секундах (можно в десятичных дробях — 0,1s).

Ну вот и всё. А получилось у нас следующее (попробуйте навести на картинку ниже).

CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.

Читайте также:  Как найти сумму в таблице в ворде

Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.

Изначально фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.

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

Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент :hover .

Поддержка браузерами

IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

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

На сегодняшний день существует 10 различных фильтров, но мы с вами рассмотрим только один – grayscale. Остальные фильтры можно применять по аналогии.

Например мы хотим заменить цветную фотографию на черно-белую при наведении курсора. Раньше потребовалось бы подготовить две фотографии: цветную и черно-белую и при наведении курсора, на месте черно-белой фотографии появлялась бы цветная. С появлением в CSS3 свойства filter, достаточно просто одной цветной фотографии и немного кода.

filter: grayscale(1); /* где 1 – оттенки серого цвета */

У нас будет следующая HTML структура: Создаем большой серый блок-контейнер с классом img-wrap, куда помещаем три блока .holder с фотографиями с классом img-1.

Читайте также:  Умный дом xiaomi mi smart home

HTML код целиком:

Блоки с фотографиями встали в ряд, благодаря float:

Как вы видите на первом скриншоте, для примера используются фотографии разного размера. Как сделать так, чтобы визуально они выглядели одинаковыми, без правок в графическом редакторе? Надо задать нужные вам размеры блока с картинкой, а что не помещается в блок holder, спрятать overflow: hidden.

.holder <
width: 200px;
height: 200px;
overflow: hidden;
>

Чтобы наши барышни не выглядели, как на "доске почета", скруглим углы блока.

Изменим правила расчета ширины и высоты серого блока-контейнера. Что это значит? По умолчанию к размерам контента прибавляются ещё и размеры отступов, полей и бордюров. Но мы говорим, что не надо учитывать их при расчете ширины и высоты блока. Иными словами, если мы задаем ширину серого блока 780 пикселей, то никакие поля этот размер не изменят.

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

.holder .img-1 <
filter: grayscale(1); /* где 1 – оттенки серого цвета */
transition: 0.5s ease-in-out;
>

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

.holder:hover .img-1 <
filter: grayscale(0); /* 0 – исходное цветное изображение */
transition: 0.5s ease-in-out; /* плавная смена оттенка */
>

Данный эффект с применением filter grayscale можно увидеть на демо.

Поддержка в браузерах

Не поддерживают старые браузеры, а также все версии IE. Chrome с 49 по 62 версии требует добавления префикса "-webkit-".

Читайте также:  Что за процесс бездействие системы грузит процессор

CSS код целиком:

#img-wrap <
background: #ccc;
margin: 40px auto;
width: 780px;
height: 270px;
padding: 20px;
box-sizing: border-box;
>

.holder <
width: 200px;
height: 200px;
margin: 20px;
float: left;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
border: 2px solid #868383;
>

/* black and white hover effect */
.holder .img-1 <
filter: grayscale(1);
-webkit-filter: grayscale(1);
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
>

.holder:hover .img-1 <
filter: grayscale(0);
-webkit-filter: grayscale(0);
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 2 ):

    Хорошая возможность привлекать и задерживать внимание на каких либо блоках или изображениях. Спасибо, не знал о таких фильтрах. Трансформирование не решало такую задачу, а фильтр реально манипуляции с кодом.

    люблю лаконичный код. filter: grayscale(1);

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Ссылка на основную публикацию
    Хранение машины в гараже плюсы и минусы
    От того, в каких условиях хранится автомобиль, во многом зависит его техническое состояние, а также внешний вид, а при желании...
    Фартуки для кухни отзывы какие лучше брать
    Сегодня поговорим о самых популярных материалах для оформления рабочей зоны, сравним их и выясним какой же материал лучше всего подойдет...
    Фейк ава в вк парня
    Фото девушек на аву Фото девушек на аву Здесь вы можете найти для себя много реальных фото на аву красивых...
    Хранилище игр на пк
    Играй в любимые игры на любом компьютере без лагов и тормозов Играй в крутые игры Как работает Loudplay Мы предоставляем...
    Adblock detector