Популярно, доступно, полезно

Как обесцветить фото с помощью CSS


Превращаем изображения в черно-белые с помощью свойства CSS filter

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

Однако, не все браузеры (в частности старые) поддерживают это свойство, так что используйте этот трюк острожно. Просто убедитесь, что впечатление пользователей от вашего сайта несильно пострадает если это не будет работать в их браузере. В случае, если вам необходим одинаковый результат во всех браузерах, я бы порекомендовал вам использовать jQuery. Используя плагины, доступные в сети, это можно сделать легко и быстро.

Используя CSS3, впрочем, самый простой метод это сделать. Нужно всего лишь несколько строк кода!

Чтобы обесцветить фото, используйте следующий CSS-код:

filter: grayscale(100%);

Если вам нужно добиться этого эффекта у более чем одного изображения, то лучше создать для этого класс:

.grayscale{filter: grayscale(100%);}

И теперь, вам нужно только добавить созданный класс к изображению:

<img src="normal-img.jpg" alt="Changing to grayscale" class="grayscale" />

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

.grayscale
{
-moz-filter: grayscale(100%);
-webkit-filter:grayscale(100%);
-o-filter:grayscale(100%);
-ms-filter:grayscale(100%);
filter: grayscale(100%);
}

Это приспособит код для всех браузеров, чтобы все выглядело одинаково.

Если во волнуетесь об internet explorer, хорошая новость в том, что IE поддерживает это свойство со дней IE4. Так что в этом плане, IE можно назвать пионером, хотя код будет немного отличатся:

filter: gray;

И если вы хотите добавить поддержку более старых браузеров, вам понадобится еще одна строка кода:

-webkit-filter: grayscale(1);

Итак, в итоге CSS код будет выглядеть следующим образом:

.grayscale
{
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-webkit-filter:grayscale(100%);
-webkit-filter: grayscale(1);
-o-filter:grayscale(100%);
-ms-filter:grayscale(100%);
filter: gray;
}

Ну, вот и все! Если вы примените этот класс к любому изображению, он будет отображаться в оттенках серого. И если вы не хотите полностью превращать его в черно-белое, вы можете установить параметр оттенков серого на любое значение от 0 до 100.

Увидеть пример в действии можно здесь: Пример

Источник

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *