JavaScript веб-разработчик
0,0
рейтинг
30 мая 2012 в 20:05

Разработка → [Перевод] CSS Filters из песочницы

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




Прошлое, настоящее и будущее фильтров



Фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. Со временем интернет-браузеры были наделены поддержкой SVG и полезность фильтров стала очевидна. Robert O’Callahan из Mozilla описал идею применения SVG фильтров к элементам DOM с помощью описания их в CSS. Он создал пример в котором показал насколько проще может быть применение SVG эффектов в комбинации с CSS. Рабочие группы CSS и SVG объединились и создали новое CSS свойство filter. Документация по данной спецификации находится здесь.

Новая жизнь свойства «filter»



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

Как работают фильтры



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

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

Описание фильтров с помощью SVG и CSS



Существует несколько способов описания и применения фильтров. Сам по себе SVG является элементом, в котором фильтры описываются с помощью синтаксиса XML. Описание фильтров используя CSS стили дает тот же результат, но благодаря синтаксису CSS этот способ является много проще.

Большинство стандартных CSS фильтров могут быть описаны и с помощью SVG, так же CSS позволяет ссылаться на фильтры описанные в SVG формате. Здесь мы поговорим только о фильтрах доступных в CSS.

Как использовать СSS Filters



Фильтры можно применять к любому видимому элементу на странице.

div { filter: grayscale(100%); }

Данный пример изменит цвет контента находящегося внутри тега на ч/б.



Каждый фильтр имеет параметр который позволяет изменять силу действия фильтра.

div { filter: grayscale(50%); }



Можно применять несколько фильтров одновременно.

div { filter: grayscale(100%) sepia(100%); }



Какие фильтры доступны для использования в CSS



grayscale(значение)

Конвертирует цвета в ч/б. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).



sepia(значение)

Создает эффект сепии. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).



saturate(значение)

Управляет насыщенностью цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).



hue-rotate(угол)

Меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg).



invert(значение)

Инвертирует цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).



opacity(значение)

Задает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

Данный фильтр работает так же как и CSS свойство opacity. Единственное различие в том, что фильтр поддерживает аппаратное ускорение, а свойство нет. Таким образом применение фильтра даст большую производительность.



brightness(значение)

Изменяет яркость изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).



contrast(значение)

Изменяет контрастность изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).



blur(радиус)

Создает эффект размытости. Значение задается в пикселях (px).



drop-shadow(x, y, радиус, цвет)

Создает тень аналогично CSS свойству box-shadow, но только фильтр имеет поддержку аппаратного ускорения. Значения задаются аналогично значениям CSS аналога.

drop-shadow(16px 16px 20px black);



filter: drop-shadow(inset 0 0 2rm blue);



url(ссылка на SVG фильтр)

Можно создавать собственные фильтры с помощью SVG элемента filter и ссылаться на них из CSS. Каждый фильтр имеет свой id.

SVG:

<filter id=”foo”>...</filter>


CSS:

div { filter: url(#foo); }

custom (coming soon)

В скором будущем станет доступна возможность создавать свои собственные фильтры с помощью CSS Shaders.

Производительность



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

Большинство фильтров работают довольно быстро на любом устройстве поддерживающем их. Однако фильтры blur и drop-shadow, использующие эффект размытости, работают намного медленнее остальных. Как именно они работают?

Когда вы применяете фильтр blur, он смешивает цвета пикселей вокруг каждого пикселя, таким образом создавая эффект размытости. Например, если задан радиус 2px, то фильтр будет выбирать по два пикселя во всех направлениях и смешивать их цвета и так для каждого пикселя. Чем больше радиус, тем больше времени нужно на расчет эффекта. Так как фильтр выбирает пиксели во всех направлениях, то при увеличении радиуса размытости в 2 раза количество пикселей возрастает в 4 раза. Это означает, что времени на расчет потребуется ровно в 4 раза больше. Фильтр drop-shadow содержит в себе фильтр blur.

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

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

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



Большинство CSS фильтров сейчас доступны для использования в браузере FireFox и браузерах на движке WebKit. В скором времени надеемся увидеть поддержку в браузерах Opera и IE10. Так как спецификация все еще находится в разработке, приходится использовать вендорные префиксы. Для WebKit -webkit-filter, для FireFox префикс не требуется.

Ниже приведена таблица совместимости фильтров с браузерами.



Полезные ссылки


Рисуем с помощью CSS фильтров.
Двигаем ползунки смотрим что получилось.
Туториал с примерами.
Официальная W3C документация по спецификации Filter Effects 1.0
Пример UI созданного с помощью фильтров.

Оригинал статьи: UNDERSTANDING CSS FILTER EFFECTS

P.S.
— В Chrome 19 фильтр drop-shadow не размывает границы тени.
— Фильтр яркости на деле не понимает значения больше 1 (100%). В оригинальной статье говорится о том, что значение 1 (100%) является значением нормальной яркости, и при увеличении его можно повысить силу действия фильтра. На самом деле значение 1 (100%) дает повышение яркости до предела, а отрицательное -1 (-100%) понижает яркость.
— Пример со всеми фильтрами — ссылка.
— Пример использования фильтров с CSS3 Transitions на состояние :hover — ссылка.
— Анимированная мозайка с использованием фильтра blur(). Убедитесь сами как данный фильтр съедает ваш процессор (аппаратное ускорение должно быть отключено) — ссылка.
Роман Лютиков @roman01la
карма
36,2
рейтинг 0,0
JavaScript веб-разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (32)

  • 0
    Фильтры, на мой взгляд, — это то, чего не хватало CSS. Еще бы миксины и другие удобства альтернативных языков, компилируемых в CSS, добавили, было бы очень круто.
    • +1
      CSS давным давно уже не хватает режимов наложения слоёв, эффектами типа инвертирования пользуются редко, а вот режимы наложения используют почти во всех макетах.
      • +1
        На мой скромный взгляд, вебу нужен новый язык стилей, отвечающий всем потребностям и способный к расширению самыми неожиданными дополнениями. Та же подсветка синтаксиса, которую хотели когда-то внедрить в браузеры, будет пестрить кучей псевдоклассов и псевдоэлементов. Уже сейчас CSS код крупного проекта иногда плохо читается, а что будет через 10−20 лет…
        • +1
          Связка CSS/HTML настолько универсальная и работает на таком количестве платформ, что замена ей найдтся очень и очень не скоро.

          Размеры таблицы зачастую зависят от качества вёрстки, можно сверстать на 30 кбайт, а можно и на 10, если делать всё лаконично. И если всё сделано грамотно, то работа даже с большой таблицей стилей не составит особого труда.
          • +1
            Размеры таблицы, в основном, зависят от сложности элементов.
            — Мне нравится CSS, а точнее CSS2. Он прост, понятен, читабелен. Но если в проекте используется CSS3, причем не простой CSS3 с закругленными уголками и тенюшками, а тот, который полностью забивает на поддержку IE8-, код превращается в кашу с не очевидными селекторами (>, +, ~...), псевдоклассами и псевдоэлементами, типа ::before и ::after. Как пример «плоского» но не очень красивого CSS можно привести стилизацию скроллбара: css-tricks.com/custom-scrollbars-in-webkit/

            Знаю о чем говорю. Последнее время делаю проекты чисто под новые браузеры. Да, мне удалось отказаться от тучи лишних элементов в HTML, стало меньше яваскриптов, которые добавляют ту или иную функциональность, доступную текущему CSS, но код, как бы вы не старались, превращается в говнокод.

            Опять повторюсь: моё недовольство CSS проявляется в верстке сложных элементов. В пример, могу привести один из блоков на странице, которой я в данный момент занимаюсь:



            Блок свёрстан без единой картинки:
            <div class="player-buttons">
            	<span class="back-button disabled"></span>
            	<span class="play-pause pause"></span>
            	<span class="forward-button"></span>
            </div>
            


            Если интересно, в качестве пруфа могу в ЛС кинуть ссылку на страницу и ссылку на код.
            • 0
              После таких слов даже не знаю, что лучше, верстать под новые браузеры с уголками и тенюшками или же заставлять всё красиво и одинаково выглядеть во всех старых браузерах.

              Я видел листинги css3, не красиво, согласен, но может со временем придём к какому-то единому красивому стандарту, который будет универсален и красив. Но это только мечты, к сожалению.

              Скиньте, пожалуйста, сам код, интересно посмотреть как выглядит на css3. И если не секрет, а почему не картинками, зачем так усложнять ситуацию?

              • 0
                На самом деле такой код можно привести в порядок. Сортировка, группирование свойств (свойства с вендорными префиксами), отступы, комментарии. Если затратить немного времени, то можно выстроить код во вполне читаемом виде.
              • 0
                Не картинками только потому, что есть возможность их избежать, забыв о подгрузке, кешировании и разнообразию картинок при изобилии классов для одного элемента + зачем грузить канал, если есть возможность использовать встроенные средства и «рисовать» элементы прямо на CSS.
              • 0
                Выложил кусок LESS кода на Pastebin: pastebin.com/u1du55Tk
                Извините за ненужные переносы.
                • 0
                  А если бы ты писал на Stylus, было бы как-то так: pastebin.com/J4VnF4A6
  • 0
    На счёт аппаратного ускорения — тонкий момент. Я уже два компа обнаружил, где отключение аппаратного ускорения в Файрфоксе даёт прирост производительности, особенно на canvas-приложениях.

    А что, если элементы с filter будут динамически менятся? Например, какое-нибудь обесцвеченное выезжающее меню.
    • +1
      Возможно на этих ПК процессор шустрее видеокарты. Так на моем дохлом ноуте при насильной активации аппаратного ускорения происходит то же самое, процессор справляется намного лучше.

      Не понял вопроса на счет динамической смены фильтров. Вас интересует каково будет влияние на производительность или как это будет выглядеть?
      • 0
        На счёт динамической — производительность не будет беспокоить ровно до тех пор, пока страница не будет изменяться динамически, имхо.
  • +4
    Таблица совместимости порадовала…
  • +4
    Ниже приведена таблица совместимости фильтров с браузерами.

    Не проще было написать «Всё это щастье поддерживает только Хром»?
    • 0
      > для FireFox префикс не требуется

      Огнелис тоже поддерживает, но только напрямую из SVG. Иными словами, нужно в страницу вставить тег <svg>, туда тег нужного фильтра и прописать в CSS его id. С другой стороны, в SVG фильтров чуть больше.

      Гляньте тут.
      • 0
        Об этом написано в статье. В таблице указано что FF поддерживает только метод использования наружных фильтров описанных с помощью инлайнового SVG. А о url() написано чуть выше.
      • +1
        Не обязательно вставлять в страницу, можно сослаться из стилей на отдельный SVG-файл.
        • 0
          Вы правы. Причем нужно указывать не просто ссылку на файл, а и id желаемого фильтра, который находится в этом файле.

          Например: div { filter: url(filters.xml#large-blur) }

          Таким образом можно создать библиотеку своих фильтров, которые будут хранится в одном файле, что очень удобно.
  • 0
    очень интересно, обязательно попробую
  • 0
    Вот этой штуки мне часто не хватало — grayscale. В целом очень правильное направление.
    • 0
      Есть целая куча JS-библиотек, которые чуть более кроссбраузерно (с применением canvas) сделают вам это. Без дополнительных спецификаций.

      * Да я и сам такую написать могу)
      • 0
        Да ещё и с поддержкой ИЕ6*
        * не к ночи будь помянут
      • 0
        Да знаю я про них. Но всякий раз, когда передо мной стоял выбор — прикрутить очередную JS-имитацию чего-либо, или же сделать по старинке (к примеру — grayscale), я выбирал более простой для пользователя путь. Ещё не хватало мне того, чтобы у несчастного пользователя ПК(или смартфона) оный «задымился» ввиду того, что дизайнер захотел того, чтобы все управляющие иконки\картинки на сайте были в оттенках серого, а по наведению цветные.

        Я люблю js, я люблю удобные и быстрые js решения. Но разного рода манипуляции над изображениями к быстрым решениям не относятся. ИМХО.
        • +2
          Но разного рода манипуляции над изображениями к быстрым решениям не относятся

          С тех пор, как на js реализовали видео декодер, я усомнился в аксиоматичности этого утверждения. Однако в браузере так или иначе хватает бутылочных горлышек, одним из которых является перерендеринг страницы, и в этом случае навороченные стили и js-анимация могут сыграть очень злую шутку. Поэтому я пока что сторонник предварительно отрендеренных и закешированных изображений вместо рендеринга чего бы то ни было на клиенте, когда это возможно.
  • 0
    Спасибо, добавил в избранное, позже обязательно использую
  • 0
    Ох медленно работают, блюр по крайней мере в этом примере.
  • 0
    Скоро можно будет фотошоп в браузер встраивать )
    • 0
      Да и сейчас никто не запрещает. С помощью Canvas можно сделать редактор изображений любой сложности. Вопрос стоит только в трудности реализации алгоритмов и быстродействии.
      • 0
        Более того, это единственно-правильное решение

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