Введение
Фильтры — мощный инструмент, который веб-авторы могут использовать для достижения интересных визуальных эффектов. В этой статье мы расскажем об истории эффектов фильтров, о том, что они делают и как их использовать. Мы рассмотрим примеры всех предопределенных фильтров, определенных для CSS, на некоторых примерах. Мы также рассмотрим вопросы производительности при их использовании на настольных и мобильных устройствах, поскольку знание влияния фильтров на скорость важно для хорошего пользовательского опыта. Наконец, мы рассмотрим текущее состояние реализации в современных браузерах.
Прошлое, настоящее и будущее эффектов фильтров
Эффекты фильтров возникли как часть спецификации масштабируемой векторной графики (SVG). Они были созданы для применения ряда различных эффектов изображения на основе пикселей к векторному рисунку. Со временем, когда производители браузеров добавили в свои браузеры возможности SVG, полезность фильтров стала очевидной. Роберту О'Каллахану из Mozilla пришла в голову блестящая идея использования фильтров SVG посредством применения CSS к «обычному» HTML-контенту. Роберт создал прототип ранней версии, которая показала, насколько мощной может быть комбинация фильтров и стилей CSS. Рабочие группы CSS и SVG в W3C решили гармонизировать использование фильтров для HTML и SVG с помощью стилей CSS, и таким образом появилось свойство «фильтр» для CSS. Прямо сейчас совместная рабочая группа людей, работающих над CSS и SVG, проделывает массу работы, чтобы сделать фильтры универсально полезными. Текущую спецификацию всего этого материала вы можете найти здесь .
Новая жизнь CSS-свойства «фильтр»
Дежавю иногда поражает веб-разработчика, когда он видит «фильтр» в стилях CSS. Это связано с тем, что в старых версиях Internet Explorer было свойство «фильтр», предоставляемое через CSS для выполнения некоторых функций, специфичных для платформы. Это устарело в пользу стандартного свойства «фильтр», которое теперь является частью CSS3. Поэтому, когда вы видите «фильтр» на некоторых старых веб-страницах, не нужно путаться. Все действия выполняются в новом свойстве «фильтр», и новые версии IE реализуют его точно так же, как и все современные браузеры.
Как работают фильтры
Так что же именно делает фильтр? Самый простой способ представить фильтр — это этап постобработки, который делает что-то волшебное после того, как все содержимое вашей страницы было выложено и нарисовано.
Когда браузер загружает веб-страницу, ему необходимо применить стили, выполнить макет, а затем отобразить страницу, чтобы было на что посмотреть. Фильтры срабатывают после всех этих шагов и непосредственно перед копированием страницы на экран. Что они делают, так это делают снимок обработанной страницы в виде растрового изображения, затем выполняют некоторую графическую магию с пикселями снимка, а затем рисуют результат поверх исходного изображения страницы. Их можно представить себе как фильтр, помещенный на переднюю часть объектива камеры. То, что вы видите через объектив, — это внешний мир, измененный эффектом фильтра.
Это, конечно, означает, что на рисование страницы с фильтрами тратится время, но правильное их использование окажет минимальное влияние на скорость вашего сайта.
Кроме того, так же, как вы можете разместить несколько фильтров друг перед другом на объективе камеры, вы можете применять произвольное количество фильтров один за другим для достижения всевозможных эффектов.
Фильтры, определенные с использованием SVG и CSS.
Поскольку фильтры изначально пришли из SVG, существуют разные способы их определения и использования. Сам SVG имеет элемент <filter> , который объединяет определения различных эффектов фильтра с использованием синтаксиса XML. Набор фильтров, определенный CSS, использует ту же графическую модель, но представляет собой гораздо более простые определения, которые легко использовать в таблице стилей.
Большинство фильтров CSS можно выразить с помощью фильтров SVG, а CSS также позволяет вам ссылаться на фильтр, указанный в SVG, если хотите. Разработчики CSS-фильтров приложили большие усилия, чтобы упростить применение фильтров для веб-авторов, поэтому в этой статье будут рассмотрены только фильтры, доступные непосредственно из CSS, игнорируя на данный момент определения SVG.
Как применить фильтр CSS
Использование фильтров CSS осуществляется с помощью свойства filter, применяемого к любому видимому элементу на вашей веб-странице. Для очень простого примера вы можете написать что-то вроде
div { { % mixin filter: grayscale(100%); % } }
и это приведет к тому, что содержимое всех элементов <div> на странице станет серым. Отлично подходит для того, чтобы ваша страница выглядела как телевизионное изображение 1940-х годов.
Большинство фильтров принимают ту или иную форму параметра для управления объемом фильтрации. Например, если вы хотите, чтобы стиль вашего контента находился посередине между исходным цветом и версией в оттенках серого, вы должны сделать это следующим образом:
div { { % mixin filter: grayscale(50%); % } }
Если вы хотите применить несколько различных фильтров один за другим, это легко — просто разместите их в CSS в следующем порядке:
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
В этом примере сначала все исходные цвета будут переведены в оттенки серого, а затем применен эффект сепии, и в конечном итоге это будет выглядеть так:
Благодаря гибкости, доступной для применения фильтров один за другим, можно достичь самых разных эффектов — экспериментировать с получением потрясающих результатов полностью зависит от вашего воображения.
Какие эффекты фильтров доступны с помощью CSS
Таким образом, оригинальный механизм фильтрации SVG является одновременно мощным, но в то же время может быть сложным в использовании. По этой причине CSS представляет множество стандартных эффектов фильтров, которые значительно упрощают их использование.
Давайте взглянем на каждого из них и посмотрим, что они делают.
- оттенки серого (количество)
- Это преобразует цвет нашего входного изображения в оттенок серого. Примененная «сумма» определяет, насколько будет применено преобразование серого. Если 100%, то все будет в оттенке серого, если 0%, цвета не изменятся. Вы можете использовать здесь число с плавающей запятой, если предпочитаете его процентам, т. е. 0 работает так же, как 0%, а 1,0 работает так же, как 100%.
- сепия (количество)
- Это придает цветам оттенок сепии, как на старых фотографиях. Применяемое «количество» работает так же, как и фильтр «оттенки серого», а именно: 100% делает все цвета полностью тонами сепии, а меньшие значения позволяют применять эффект в меньших пропорциях.
- насыщать (количество)
- Это применяет эффект насыщенности цвета к цветам, что делает их более яркими. Это классный эффект, который может сделать фотографии похожими на плакаты или мультфильмы. Этот эффект также позволяет вам использовать значение больше 100%, чтобы действительно подчеркнуть насыщенность. Определенно эффект, который может заставить вещи выглядеть довольно круто!
- оттенок-поворот (угол)
- Это своего рода цветовой эффект, который можно использовать для получения интересных результатов. Что он делает, так это сдвигает цвета, чтобы входное изображение выглядело совершенно по-другому. Если вы можете представить цветовой спектр, изменяющийся от красного к фиолетовому вокруг цветового круга , то этот эффект принимает исходный цвет на круге в качестве входных данных и поворачивает его с помощью параметра «угол», чтобы получить цвет на круге, к которому он вращался, как выходное значение цвета. Таким образом, все цвета изображения смещаются на колесе под одним и тем же углом. Это, конечно, упрощение того, что он делает, но, надеюсь, достаточно близкое, чтобы оно имело смысл.
- инвертировать (сумма)
- Этот эффект переворачивает цвета – так что, если примененное «объем» равно 100%, результат будет выглядеть как фотонегатив из старых пленочных камер! Как и раньше, при использовании значений меньше 100% эффект инвертирования будет постепенно применяться.
- непрозрачность (количество)
- Если вы хотите, чтобы фильтруемый контент выглядел полупрозрачным, этот вариант для вас. Значение суммы определяет, насколько непрозрачным будет вывод. Таким образом, значение 100% полностью непрозрачно, поэтому выходные данные будут точно такими же, как входные. Когда значение упадет ниже 100%, выходное изображение станет менее непрозрачным (более прозрачным), и вы будете видеть его все меньше и меньше. Это, конечно, означает, что если он перекрывает что-то еще на странице, то, что находится под ним, начнет становиться видимым. «Количество» 0% означает, что оно полностью исчезнет, но учтите, что вы все равно можете получать такие события, как щелчки мыши и т. д., на полностью прозрачных объектах, поэтому это удобно, если вы хотите создать интерактивные области, ничего не отображая.
Это работает так же, как уже известное вам свойство opacity. В целом свойство CSS «opacity» не имеет аппаратного ускорения, но некоторые браузеры, реализующие фильтры с использованием аппаратного ускорения, ускоряют версию фильтра непрозрачности для гораздо большей производительности.
- яркость (количество)
- Это похоже на регулировку яркости на вашем телевизоре. Он регулирует цвета между полностью черным и исходным цветом пропорционально параметру «количество». Если вы установите для этого параметра значение 0%, вы не увидите ничего, кроме черного, но по мере увеличения значения до 100% вы увидите, что все больше и больше исходного изображения становится ярче, пока не достигнете 100%, где оно будет таким же, как входное изображение. . Конечно, вы можете просто продолжать — поэтому установка значения примерно 200 % сделает изображение в два раза ярче оригинала — отлично подходит для настройки снимков при слабом освещении!
- контраст (количество)
- Больше управления с вашего телевизора! Это позволит отрегулировать разницу между самыми темными и самыми светлыми частями входного изображения. Если вы используете 0%, вы получите черный цвет, как и в случае с «яркостью», так что это не слишком интересно. Однако, когда вы увеличиваете значение до 100%, разница в темноте меняется, пока вы не достигнете 100%, и изображение снова не станет исходным. Для этого эффекта вы также можете выйти за пределы 100%, что еще больше увеличит разницу между светлыми и темными цветами.
- размытие (радиус)
- Если вам нужен мягкий край вашего контента, вы можете добавить размытие. Этот выглядит как классический вид вазелина на листе стекла, который раньше был популярной техникой создания фильмов. Он смешивает все цвета вместе и распространяет их эффект — примерно так же, как если бы ваши глаза были не в фокусе. Параметр «радиус» влияет на то, сколько пикселей на экране сливаются друг с другом, поэтому большее значение создаст большее размытие. Ноль, конечно, оставляет изображение неизменным.
- падающая тень (тень)
- Так приятно иметь возможность сделать ваш контент таким, как будто он находится на улице под солнцем, с тенью на земле позади него, и это, конечно, то, что делает «падающая тень». Он делает снимок изображения, делает его одноцветным, размывает, а затем немного смещает результат, чтобы он выглядел как тень исходного содержимого. Переданный параметр «shadow» немного сложнее, чем просто одно значение. Это серия значений, разделенных пробелом, причем некоторые значения также являются необязательными! Значения «тени» определяют, где размещается тень, насколько сильно применяется размытие, цвет тени и т. д. Для получения полной информации о том, что делают значения «тени», в спецификации CSS3 «Фон» определен «box-shadow» в большом деталь. Несколько примеров ниже должны дать вам хорошее представление о различных возможностях.
Это еще одна операция фильтра, аналогичная существующей функциональности CSS, доступной через свойство box-shadow. Использование подхода с фильтрацией означает, что некоторые браузеры могут ускорять аппаратное обеспечение, как мы описали выше для операции «непрозрачность».
- URL-адрес, ссылающийся на фильтры SVG
- Поскольку фильтры возникли как часть SVG, вполне логично, что вы сможете стилизовать свой контент с помощью фильтра SVG. Это легко сделать с текущим предложением свойства «фильтр». Все фильтры в SVG определяются с помощью атрибута «id», который можно использовать для ссылки на эффект фильтра. Итак, чтобы использовать любой фильтр SVG из CSS, все, что вам нужно сделать, это сослаться на него, используя синтаксис URL.
Например, разметка SVG для фильтра может выглядеть примерно так:
<filter id="foo">...</filter>
тогда из CSS вы можете сделать что-то простое, например:
div { { % mixin filter: url(#foo); % } }
и вуаля! Все <div в вашем документе будут стилизованы с использованием определений фильтров SVG.
- индивидуальный (скоро)
- Скоро на горизонте появятся пользовательские фильтры. Они задействуют мощь вашего графического процессора и используют специальный язык шейдеров для создания удивительных эффектов, ограниченных только вашим собственным воображением. Эта часть спецификации «фильтра» все еще находится в стадии обсуждения и изменения, но как только она появится в ближайшем к вам браузере, мы обязательно напишем больше о том, что возможно.
Вопросы производительности
Каждый веб-разработчик заботится о производительности своей веб-страницы или приложения. CSS-фильтры — мощный инструмент для создания визуальных эффектов, но в то же время они могут повлиять на производительность вашего сайта.
Понимание того, что они делают и как это влияет на производительность, имеет значение, особенно если вы хотите, чтобы ваш сайт хорошо работал на мобильных устройствах, поддерживающих CSS-фильтры.
Во-первых, не все фильтры одинаковы! Фактически, большинство фильтров работают очень быстро на любой платформе и оказывают незначительное влияние на производительность. Однако фильтры, которые выполняют размытие любого типа, обычно работают медленнее, чем другие. Это, конечно, означает «размытие» и «тень». Это не значит, что вам не следует их использовать, но понимание того, как они работают, может помочь.
Когда вы выполняете blur , цвета пикселей вокруг выходного пикселя смешиваются, чтобы создать размытый результат. Итак, скажем, если ваш параметр radius равен 2, то фильтру необходимо просмотреть 2 пикселя во всех направлениях вокруг каждого выходного пикселя, чтобы сгенерировать смешанный цвет. Это происходит для каждого выходного пикселя, поэтому это означает множество вычислений, которые становятся больше, когда вы увеличиваете radius . Поскольку blur действует во всех направлениях, удвоение «радиуса» означает, что вам нужно просмотреть в 4 раза больше пикселей, поэтому на самом деле каждое удвоение radius происходит в 4 раза медленнее. Фильтр drop-shadow содержит blur как часть своего эффекта, поэтому он также ведет себя так же, как blur , когда вы меняете radius и spread частей параметра shadow .
С blur не все потеряно, поскольку на некоторых платформах для его ускорения можно использовать графический процессор, но это не обязательно будет доступно в каждом браузере. Если вы сомневаетесь, лучше всего поэкспериментировать с «радиусом», который дает желаемый эффект, а затем попытаться уменьшить его настолько, насколько это возможно, сохраняя при этом приемлемый визуальный эффект. Такая настройка сделает ваших пользователей счастливее, особенно если они используют ваш сайт с телефона.
Если вы используете фильтры на основе url , ссылающиеся на фильтры SVG, они могут содержать любой произвольный эффект фильтра, поэтому имейте в виду, что они также могут работать медленно, поэтому постарайтесь убедиться, что вы знаете, что делает эффект фильтра, и поэкспериментируйте на мобильном устройстве, чтобы добиться уверен, что производительность в порядке.
Доступность в современных браузерах
В настоящее время ряд эффектов CSS- filter доступен в браузерах на базе WebKit и Mozilla. Мы ожидаем вскоре увидеть их в Opera, а также в IE10. Поскольку спецификация все еще находится в стадии разработки, некоторые производители браузеров реализовали эту функцию с использованием префиксов поставщиков. Таким образом, в WebKit вам нужно использовать -webkit-filter , в Mozilla вам нужно будет использовать -moz-filter и следить за другими реализациями браузера по мере их появления.
Не все браузеры сразу поддерживают все эффекты фильтров, поэтому ваш опыт будет разным. В настоящее время браузер Mozilla поддерживает только функцию filter: url() — без префикса поставщика, поскольку эта реализация предшествует другим функциям эффектов.
Ниже мы суммировали эффекты фильтров CSS, доступные в различных браузерах, с приблизительными показателями производительности, когда они реализованы в программном обеспечении. Обратите внимание, что ряд современных браузеров начинают реализовывать их аппаратно (с графическим ускорением). Когда они будут созданы с поддержкой графического процессора, производительность будет значительно улучшена для более медленных эффектов. Как обычно, тестирование в разных браузерах — лучший способ оценить производительность.
| Эффект фильтра | Поддержка браузера | Производительность |
|---|---|---|
| оттенки серого | Хром | очень быстро |
| сепия | Хром | очень быстро |
| насыщать | Хром | очень быстро |
| оттенок-поворот | Хром | быстрый |
| инвертировать | Хром | очень быстро |
| непрозрачность | Хром | может быть медленным |
| яркость | Хром | быстрый |
| контраст | Хром | быстрый |
| размытие | Хром | медленно, если не ускоряться |
| тень | Хром | может быть медленным |
| URL() | Хром, Мозилла | Варьируется, от быстрого к медленному |
Другие хорошие ресурсы
Великолепное интерактивное приложение для абстрактного рисования с фильтрами , позволяющее экспериментировать и делиться своими работами. Обязательно посетите великолепную страницу интерактивных фильтров Эрика Бидельмана. Отличное руководство по фильтрам с примерами. Официальная черновая спецификация W3C Filter Effects 1.0 http://dev.w3. org/fxtf/filters/ Пример пользовательского интерфейса, созданного с использованием фильтров