Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Введение в webkit-фильтры

14 марта 2012 | Опубликовано в css | 4 Комментариев »

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

Приступаем к работе

Фильтры, как правило, используются с изображениями  (хотя иногда они применяются  к видео). Мы будем использовать это  изображение для демонстрации работы фильтров. Для начала создадим HTML-файл, прикрепим изображение и начнём тестировать css-фильтры. Для того, чтобы лучше продемонстрировать работу фильтров, мы будем использовать в примере 2 изображения: оригинальное и обработанное при помощи фильтров.

! Обратите внимание: публичные версии браузеров ещё не поддерживают эти фильтры, они работают только в  Google Canary / скачайте этот браузер, чтобы иметь  возможность просмотреть демонстрации.

Фильтр hue-rotate (оттенки)

Вы любите играть с  настройками  Hue / Saturation  в Photoshop? Теперь это можно делать в браузере при помощи фильтра hue-rotate (он позволяет менять оттенок изображения)

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

Смотрите пример

Данный фильтр, использует значения в градусах (50 degree, сокращенно deg).  Подобно тому, как вы указываете цифровое значение hue в Фотошоп, задайте значение в градусах для этого фильтра, чтобы получить точно такой же эффект.

Вы можете создать  анимацию, которая позволит меняться эффектам по очереди, смотрите пример кода.

img {
   -webkit-animation: adjustHue 1s alternate infinite;
}
@-webkit-keyframes adjustHue {
   0% { -webkit-filter: hue-rotate(30deg); }
   50% { -webkit-filter: hue-rotate(60deg); }
   100% { -webkit-filter: hue-rotate(90deg); }
}

Фильтр grayscale (градации серого)

Раньше мы использовали различные хаки для того, чтобы изображение изменяло свой цвет от черно-белого к цветному в браузере. Один из методов предусматривает наложение одного изображения на другое.  Другим вариантом является использование canvas. Или ...  можно просто использовать grayscale-фильтр.

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

Смотрите пример

При указании значений для grayscale-функции, просто решите для себя, насколько серым по шкале от 0 до 100% должно быть изображение.

Можно создать красивую анимацию при наведение курсора на картинку, используя CSS3-трансформацию (transition)

img {
  -webkit-transition: -webkit-filter 1s;
}
img:hover {
    -webkit-filter: grayscale(100%);
}

В будущем появятся  префиксы и для других браузеров, но сейчас мы их указывать не будем, так как они работают только в Webkit (пока).

Фильтр sepia (сепия)

Хотите сделать фотографию под старину? В этом вам поможет фильтр sepia.

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

Смотрите пример

Фильтр blur (размытость)

Указав радиус, мы можем легко сделать изображение размытым при просмотре  в браузере при помощи фильтра blur.

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

Смотрите пример

Фильтр brightness (яркость)

При указании значений для этого фильтра, помните, что 100%-это значение яркости по умолчанию.  Чем ниже это значение, тем темнее получатся изображения.

И наоборот, чем выше это значение, тем светлее будет изображение. Мы использовали значение 15%.

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


Смотрите пример

Не забывайте: вы можете комбинировать несколько фильтров.

img {
      -webkit-filter: brightness(10%) sepia(100%);
}

Смотрите пример

Фильтр contrast (контраст)

При помощи этого фильтра можно  довольно легко регулировать значение контраста для  изображения.

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

Подобно предыдущему фильтру, 100% — это значение по умолчанию. Мы можем уменьшить или увеличить это значение, чтобы настроить контрастность изображения. Согласно спецификации,  значение 0% должно сделать изображение на 100% черным, однако оно  почему-то получается темно-серым.

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

Давайте создадим красивую анимацию.

img {
    -webkit-animation: bluePill 1s alternate infinite;
}
@-webkit-keyframes bluePill {
   0% { -webkit-filter: contrast(2000%); }
   100% { -webkit-filter: contrast(100%); }
}

Фильтр invert (негатив)

Указывайте значение от 0% до 100%, в зависимости от того, насколько вы хотите  инвертировать изображение.

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

Смотрите пример

Заметим, что значение 0% оставит изображение без изменений.

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

Фильтр saturate (насыщенность)

Значение 0% фильтра saturate равносильно значению 100%  фильтра grayscale, оба эти значения полностью обесцветят изображение.

100%  для фильтра saturate — первоначальное значение, уменьшая его, мы сделаем изображение более насыщенным, и соответственно, увеличивая-более насыщенным.

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

Смотрите пример

Более подробно о фильтрах вы можете прочитать здесь.

По материалам net.tutsplus.com




Комментарии

  1. Guest
    Thumb up Thumb down -3

    Комментарий скрыт из-за рейтинга

    Ответить

    Elena Ответ:

    Thumb up Thumb down +4

    Затем, что в ближайшем будущем может стать кроссбраузерно. А мы просто обязаны следить за всякими нововведениями. 8)

    «В будущем появятся префиксы и для других браузеров, но сейчас мы их указывать не будем, так как они работают только в Webkit (пока)».

    Ответить

  2. DrShteyn
    Thumb up Thumb down 0

    Помоему глуппо использовать такие штуки как просто свойства к изображению... А вот анимировать ими, можно получать шикарные вещи))) ;)

    Ответить

  3. alex
    Thumb up Thumb down 0

     Спасибо за познавательную статью! Хочется добавить, что файрфокс сейчас уже в стабильной версии фильтры поддерживает (сам использую в проекте).

    Ответить

Оставить ответ


четыре + 8 =

Вставить изображение