Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
2 г. назад

Как использовать CSS3 фильтры

CSS3 фильтры (filter) – это мощный инструмент, позволяющий достигать удивительных визуальных эффектов, например для изображений. Особенно он может пригодиться для создания эффектов наведения (hover) элементов. Фильтры предоставляют нам способ модификации рендеринга основного элемента DOM. Они позволяют делать такие вещи, как размытие, изменять контрастность, даже менять цвет вашего элемента.

Создание фильтров

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

Чтобы использовать этот CSS3 фильтр, нам просто нужно написать следующее:

img {
  -webkit-filter: grayscale(1);
}

Как видно, в настоящее время необоходимо использовать префикс -webkit- (эта функция доступна до сих пор только в WebKit-браузерах), ключевом слове filter, а затем можно задать другие фильтры через запятую.

В данном случае выбрали grayscale(1), чтобы элемент стал полностью черно-белым, но я могла бы задать 0.5 и изображение тогда было бы окрашено с 50% насыщением.

То, что всегда выглядит красиво на картине это размытость(blur), так что добавим ее.

img {
  -webkit-filter: grayscale(0.5) blur(2px);
}

Как видите, использовать несколько фильтров просто. Если вы проверите это в браузере, то сможете увидеть, что оба эти фильтра применяются должным образом к изображению. До сих пор все было просто, не так ли? Но если вы хотите фильтры как в Photoshop, CSS также может сделать это для вас. Давайте начнём с контраста.

Применить контраст к изображению так же просто:

img {
  -webkit-filter: contrast(300%);
}

В случае контраста вы должны думать о 100% как об отправной точке. Если вы установите значение 100%, то изображение не изменится. Если меньше этого значения, например, 50%, то будет уменьшаться контрастность. Если более 100%, например, 150%, то это сделает изображение более ярким.

Еще один очень интересный фильтр, который есть в нашем распоряжении – это  поворот оттенка (hue-rotate). Он работает очень похоже на панель Hue/Saturation в Photoshop.

img {
  -webkit-filter: hue-rotate(180deg);
}

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

У нас есть также насыщение (saturate), другой эффект, широко используемый в Photoshop. С помощью этого фильтра, со значением выше 100%, можно сделать цвета вашего элемента более яркими, так как этот фильтр также использует 100% в качестве отправной точки:

img {
  -webkit-filter: saturate(300%);
}

И, конечно, у нас есть другие фильтры, такие как сепия (sepia), который работает таким же образом, в градациях как у фильтра grayscale, где вы вводите значение от 0 до 1:

img {
  -webkit-filter: sepia(80%);
}

У нас также есть непрозрачность (opacity) и этот фильтр также работает со значениями в диапазоне от 0 до 1:

img {
  -webkit-filter: opacity(0.8);
}

Еще один CSS3 фильтр, который у нас есть – это негатив (invert), он обращает цвета пикселей на элементе так, что если вы задаёте значение 100%, выход будет выглядеть как негатив фотографии. Значения задаются в диапазоне от 0% до 100%.

img {
  -webkit-filter: invert(100%);
}

Один из фильтров, в котором уже есть функциональность – это фильтр тени (drop-shadow). Он принимает те же значения, что box-shadow в CSS. Главное отличие в том, что при применении к PNG файлу с прозрачным фоном, тень будет наложена вокруг пикселей, а не вокруг контура файла PNG. Версия CSS фильтра также аппаратно ускорена.

img {
  -webkit-filter: drop-shadow(10px 10px 15px #000);
}

Наконец, у нас есть яркость (brightness) и это также именно то, что вы, вероятно, и прежде использовали в Photoshop. У этого фильтра 100% принято в качестве исходного значения. Если вы установите 100%, то ничего в элементе изменится, а вот значение 0% превратит ваш элемент в черный, а значение 200% сделает его в два раза ярче:

img {
  -webkit-filter: brightness(200%);
}

Заключение

Если вы хотели бы посмотреть и поэкспериментировать с этими эффектами, то вы можете проверить и попробовать изменить созданный пример: http://codepen.io/SaraVieira/pen/Aypmk

CSS3 фильтры являются очень мощным способом изменять ваши элементов на лету, без необходимости вовлечения дополнительных изображений. Все это делается с помощью CSS. Это дает нам неограниченные возможности, когда речь идет об обработке пользовательских событий визуально. Жаль, что пока только в WebKit.

Перевод. Оригинал: http://www.developerdrive.com/2013/11/how-to-use-css-filters/

Комментарии

#tony27.02.2014 20:06
Павел, saturate дважды указали, а сепию забыли. Ответить
#PaLyCH01.03.2014 18:47
Внес поправки :) Ответить

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

Наверх