CSS3 фильтры для изображений. CSS фильтры изображений
В данной статье рассматриваются API , которые еще не полностью стандартизированы и все еще продолжают развиваться. Будьте осторожны при использовании экспериментальных API , в собственных проектах.
Введение
Фильтры являются мощным инструментом, который веб-разработчики могут использовать для создания интересных визуальных эффектов. В этой статье мы рассмотрим историю развития эффектов фильтров, что они делают и как ими пользоваться. Мы рассмотрим примеры всех предопределенных фильтров, заданных для CSS .
Мы также затронем ряд аспектов, касающихся производительности для использования на стационарных и мобильных устройствах, так как точное определение скорости взаимодействия фильтров важно для создания позитивного опыта пользователя. И наконец, мы рассмотрим состояние реализации эффектов фильтров в современных браузерах на текущий момент.
Прошлое, настоящее и будущее эффектов фильтров
Эффекты фильтров возникли как часть спецификации масштабируемой векторной графики (SVG ). Они были созданы для применения в векторной графике набора различных пикселей, основываясь на эффектах изображения. Со временем, по мере того, как разработчики браузеров добавляли возможности работы с SVG , полезность фильтров стала очевидной.
У Роберта O’Каллахана из Mozilla возникла блестящая идея — использовать SVG фильтры путем применения CSS к «обычному » HTML -контенту.
Роберт разработал прототип, который показал, насколько мощными возможностями может обладать комбинация фильтров и стилей CSS . Рабочие группы W3C , занимавшиеся CSS и SVG , решили упорядочить через CSS -стили использование фильтров как для HTML , так и для SVG , и таким образом родилось свойство CSS — «filter «.
В данный момент совместная группа разработчиков, занимающихся CSS и SVG , работает над тем, чтобы сделать фильтры универсальными. Текущую спецификацию по этой теме вы можете найти здесь .
Новая жизнь свойства CSS «filter»
Веб-разработчики иногда переживают дежавю, когда видят «filter » в стилях CSS . Это связано с тем, что старые версии Internet Explorer имели свойство «filter », реализуемое через CSS для обеспечения некоторых функций платформы. Это было старое определение стандарта свойства «filter », которое теперь является частью CSS3 .
Поэтому, когда вы видите «filter » в среде некоторых старых веб-страниц, не путайте его с новыми фильтрами. Новое свойство «filter » — это объект, в котором происходят все преобразования, и новые версии IE реализуют его так же, как и все остальные современные браузеры.
Как работают фильтры
Итак, что же именно делает фильтр? Фильтр можно представить себе, как этап завершающей обработки, который делает что-то магическое, после того, как контент уложен и выведен на странице.
Когда браузер загружает веб-страницы, ему необходимо применить стили, реализовать макет, а затем сформировать страницу, которую мы затем увидим. Фильтры вступают в действие после всех этих действий, непосредственно перед тем, как страница копируется на экран.
То, что они делают, можно описать как фотографирование отображаемой страницы в качестве растрового изображения, а затем выполнение некоторой графической магии с пикселями этой фотографии и вывод результата поверх оригинального изображения страницы.
Еще один образ, который можно представить — это фильтр, помещенный на объектив фотокамеры. Вы видите через объектив камеры внешний мир, измененный эффектом фильтра.
Это, естественно, означает, что при формировании страницы с помощью фильтров затрачивается определенное дополнительное время, но, если они применяются правильно, это минимально повлияет на скорость загрузки сайта.
Кроме того, точно так же, как вы можете наложить сразу несколько фильтров на объектив камеры, вы можете применять на веб-страницах произвольное количество фильтров один за другим для достижения всевозможных эффектов.
Фильтры, определяемые с помощью SVG и CSS
Поскольку фильтры изначально произошли из SVG , существуют различные способы их определения и использования. Непосредственно SVG имеет элемент, который упаковывает определение различных эффектов фильтра, используя синтаксис XML .
Набор фильтров, определяемых через CSS , имеет то преимущество, что при той же графической модели они гораздо проще определяются и их легко использовать в таблице стилей.
Большинство CSS -фильтров может быть выражено в терминах фильтров SVG , и CSS также позволяет ссылаться на фильтр, определенный в SVG .
Разработчики CSS -фильтров потратили немало усилий на то, чтобы упростить использование фильтров для веб-дизайнеров, и поэтому в этой статье будут описаны только фильтры, доступные непосредственно из CSS . Игнорируя фильтры, определяемые через SVG .
Как применять CSS-фильтр
Примечание: описания и примеры, приведенные ниже, используют официальный синтаксис W3C, который рано или поздно будет доступен во всех современных браузерах. Чтобы использовать фильтры в данный момент, вы должны использовать версию свойства «filter» с вендорным префиксом. Но не волнуйтесь, есть простой способ справиться со всем этим, о чем мы расскажем в конце этой статьи.
Использование фильтров из CSS осуществляется с помощью свойства «filter », применяемого к любому видимому элементу страницы. В качестве очень простого примера мы можем написать нечто подобное:
div { +filter: grayscale(100%); }
и тогда все содержимое внутри всех элементов
Оригинальное изображение
Изображение после применения фильтра
Большинство фильтров используют определенную форму параметра для регулировки того, насколько интенсивно применяется фильтр.
Так, например, если вы хотите задать, чтобы контент представлял собой что-то среднее между оригинальным цветом и картинкой полностью пропущенной через фильтр серых тонов, вы можете сделать это следующим образом:
div { +filter: grayscale(50%); }
Отфильтрованное на 50% изображение
Если вы хотите применить сразу несколько различных фильтров один за другим, это просто — поместите их в соответствующем порядке в файле CSS вот так:
В этом примере сначала применяется серый фильтр, а затем — эффект сепии. В конечном итоге изображение будет выглядеть вот так:
Благодаря возможности применять фильтры один за другим, можно добиться очень разных эффектов — все зависит от вашего воображения. Поэкспериментировав, вы можете получить действительно удивительные результаты.
Какие эффекты фильтров доступны через CSS
Таким образом, оригинальный механизм SVG -фильтров является довольно мощным, но в то же время он довольно сложен в использовании. В связи с этим в CSS было введено огромное множество стандартных эффектов фильтра, что делает их использование очень простым.
Давайте рассмотрим каждый из них и разберемся, что они делают.
grayscale(amount)
Этот фильтр переводит цвета входящего изображения в оттенки серого. «amount » указывает, на сколько процентов применяется данный фильтр. Если «amount » равно 100%, то все цвета будут представлены в оттенках серого, если это 0% — цвета остаются неизменными.
Вы можете использовать для определения значения число с плавающей точкой, если предпочитаете обойтись без процентов. То есть, 0 обозначает то же, что и 0%, 1.0 — 100%:
Оригинал
sepia(amount)
Этот фильтр передает цвета с оттенками сепии, как на старых фотографиях. «amount » используется так же, как и для фильтра grayscale .
А именно: 100% делает все цвета полностью представленными в оттенках сепии, меньшие значения позволяют применить эффект не так интенсивно:
Оригинал
saturate(amount)
Это эффект задает насыщенность цветов, что делает их более яркими. Это крутой эффект, который позволяет сделать фотографии выглядящими, как плакаты или постеры.
Данный эффект также позволяет использовать значение, превышающее 100%, чтобы действительно подчеркнуть насыщенность. Определенно это тот эффект, который может сделать изображения действительно потрясающими!
Оригинал
Примечание: В Chrome версии 19, в соответствии со спецификацией W3C, функция saturate() принимает целое значение (без знака процентов) вместо десятичных чисел или процентов. Не волнуйтесь, об этой ошибке известно разработчикам, вскоре она будет исправлена.
hue-rotate(angle)
Этот фильтр задает слегка причудливый цветовой эффект, который может использоваться для получения интересных результатов. Он сдвигает цветовую гамму, в результате чего изображение выглядит совершенно иначе. Представьте себе цветовую гамму от красного до фиолетового, расположенную по кругу.
Этот эффект сдвигает все исходные цвета на определенный угол, который задается параметром «angle «. Это, конечно, упрощенное представление того, что делает этот фильтр, но, надеюсь, вы приблизительно улавливаете логику:
Оригинал
hue-rotate(90deg)
invert(amount)
Этот эффект переворачивает цвета — так что, если параметр «amount » равен 100%, результат будет выглядеть как негатив пленки старого фотоаппарата! Аналогично предыдущим фильтрам, используя значения меньше 100%, мы можем регулировать интенсивность применения фильтра:
Оригинал
opacity(amount)
Если вы хотите, чтобы контент выглядел полупрозрачным, этот фильтр — то, что вам нужно. Значение «amount» определяет, насколько прозрачным будет содержимое страницы. Так значение 100% устанавливает полную непрозрачность, то есть изображение на входе будет аналогично выходному изображению.
По мере уменьшения значения параметра изображения становятся более прозрачными, и все менее и менее заметными. Естественно, это означает, что, если они до того перекрывали что-то на странице, эти объекты становятся видимыми.
«amount » 0% означает, что изображение полностью исчезнет — но обратите внимание, вы все равно можете задавать для них отслеживание событий, таких как клик мыши и т.д. Это возможно даже для полностью прозрачных объектов. Что удобно, если вы хотите создать интерактивные области, в которых совсем ничего не будет отображаться.
Этот фильтр работает так же, как свойство «opacity », которое вы уже знаете. Как правило, для свойства CSS «opacity » не применяется аппаратное ускорение, но некоторые браузеры, реализующие фильтры с использованием аппаратного ускорения, для большей производительности ускоряют версию фильтра непрозрачности:
Оригинал
brightness(amount)
Этот эффект действует, как регулировка яркости в телевизоре. Он изменяет цвета от полностью черного до первоначального цвета пропорционально заданному параметру «amount «.
Если вы установите его на 0%, то не увидите ничего, кроме черного цвета, но по мере увеличения значения к 100% вы будете видеть, как постепенно проявляется оригинальное изображение, пока на 100% вы не увидите сам исходный элемент.
Конечно, вы можете продолжить — установив что-то вроде 200%, вы получите изображение в два раза более яркое, чем оригинал — отличный способ для обработки снимков, сделанных при низкой освещенности!
Оригинал
brightness(140%)
contrast(amount)
Еще одна функция управления из телевизора! Этот фильтр корректирует разницу между самыми темными и самыми светлыми частями входного изображения. Если вы используете 0%, в итоге получите черный фон, как и в случае с «brightness », это не слишком интересно.
Однако по мере увеличения значения к 100% в темноте будет проступать исходное изображение, пока на 100% вы его не получите. Для этого эффекта вы также можете выйти за пределы 100%, что увеличит разницу между светлыми и темными цветами еще больше:
Оригинал
blur(radius)
Если вы хотите сгладить границы контента, вы можете добавить размытие. Это выглядит как классический взгляд через матовое стекло, который раньше был популярным методом съемки кинофильмов.
Этот эффект заставляет все цвета разливаться за пределы тех зон, которые они заполняли в исходном изображении и сливаться с соседними цветами — как будто вы потеряли фокусировку глаза.
Параметр «radius » влияет на то, как много пикселей на экране смешиваются друг с другом. Чем больше его значение, тем сильнее размытие. Ноль, конечно, оставляет изображение без изменений:
Оригинал
drop-shadow(shadow)
Хорошо иметь в распоряжении эффект, который дает возможность сделать так, чтобы контент выглядел, будто он расположен на солнце, которое отбрасывает тень на землю позади него. И это, конечно, достигается с помощью фильтра «drop-shadow ».
Он делает снимок изображения, переводит его в один цвет, размывает, а затем немного компенсирует результат так, что это выглядит, как тень от исходного контента. Параметр «shadow » на самом деле является немного более сложным, чем просто одно значение. Это ряд значений, разделяемых пробелом — и некоторые значения являются необязательными!
«shadow » задает такие параметры, как расположение тени, степень размытия, цвет тени и т.д. Для получения полной информации о том, что задается значениями параметра «shadow », ознакомьтесь со спецификацией «box-shadow » CSS3 Backgrounds .
Несколько примеров, приведенных ниже, должны дать вам представление о том, какие варианты эффектов доступны с помощью этого фильтра:
drop-shadow(16px 16px 20px black)
drop-shadow(10px -16px 30px purple)
Это еще одна операция с фильтрами, которая похожа на существующий CSS функционал, доступный через свойство ‘box-shadow ’. Использование этого фильтра означает, что в некоторых браузерах вы можете оптимизировать его работу с помощью аппаратного ускорения, как это было описано в разделе «opacity ».
Фильтры url-адресов, связанных с SVG
Поскольку фильтры изначально были созданы, как часть SVG , вполне логично, что вы можете укладывать контент с помощью SVG -фильтров. С помощью возможностей, которые на сегодняшний день обеспечивает свойство «filter », это делается очень просто.
Все фильтры SVG определены с помощью атрибута ‘ID ‘, который можно использовать, чтобы ссылаться на конкретный эффект фильтра. Таким образом, все, что вам нужно сделать, чтобы использовать любой SVG -фильтр из CSS , это разместить на него ссылку при помощи синтаксиса ‘url ’.
Например, SVG -разметка для фильтра может представлять собой примерно следующее:
А в CSS вы можете разместить такой простой код:
div { +filter: url(#foo); }
И вуаля! Все блоки
custom (ожидается вскоре)
Совсем скоро мы сможем использовать пользовательские фильтры. Это позволит полностью задействовать весь потенциал вашего GPU через использование специального шейдерного языка программирования и создавать совершенно удивительные эффекты, ограниченные только вашей фантазией.
Эта часть спецификации «filter » все еще находится в стадии обсуждения, но как только она будет реализована в большинстве популярных браузеров, мы обязательно подробно ее опишем.
Вопросы производительности
Одним из основных аспектов, о котором заботится каждый веб-разработчик, является производительность веб-страницы или приложения. CSS фильтры являются мощным инструментом визуальных эффектов, но в то же время они могут сказаться на производительности сайта.
Понимание того, что они делают и как это влияет на производительность, имеет важное значение. Особенно если вы хотите, чтобы ваш сайт нормально работал на мобильных устройствах.
Во-первых, не все фильтры одинаковы! На самом деле, большинство фильтров работают быстро на любой платформе и очень незначительно влияют на производительность.
Тем не менее, фильтры, которые выполняют различные виды размытия, как правило, медленнее, чем другие. Это относится к таким эффектам, как ‘blur ’ и ‘drop-shadow ’. Это, конечно, не означает, что вы не должны их использовать, просто нужно понимать, как они работают.
Когда вы применяете фильтр ‘blur ’, для генерации эффекта размытия он смешивает цвета из разных пикселей по всему выходному изображению. Так, скажем, если параметр ‘radius ’ равен 2, то для генерации смешанных цветов фильтр должен обрабатывать 2 пикселя в каждом направлении от каждого исходного пикселя.
Так как это делается для каждого исходного пикселя, то автоматически это означает большое количество расчетов. И чем больше радиус, тем больше расчетов. Поскольку ‘blur ’ обрабатывает пиксели в каждом из направлений, удвоение радиуса означает, что должно быть обработано в 4 раза больше пикселей.
То есть каждое увеличение радиуса в два раза влечет за собой замедление работы в четыре раза. Фильтр ‘drop-shadow ’ содержит эффект ‘blur ’ как одну из составляющих частей обработки объектов. Поэтому он ведет себя так же, как и ‘blur ’, когда вы изменяете части ‘radius ’ и ‘spread ’ параметра ‘shadow ’.
Однако с ‘blur ’ на самом деле не все так плохо, так как на некоторых платформах можно использовать графический процессор для его ускорения. Но это доступно не во всех браузерах.
Если вы сомневаетесь, лучше всего экспериментировать и вывести наименьшее значение ‘radius ’, которое дает вам приемлемый визуальный эффект. Такая настройка сделает счастливее ваших пользователей, особенно если они заходят на ваш сайт со смартфона.
Если вы используете ‘url ’ фильтры, ссылающиеся на SVG -фильтры, они могут содержать любые произвольные эффекты фильтров, и поэтому также могут работать медленно.
Поэтому постарайтесь точно выяснить, что именно делает этот эффект фильтра, и поэкспериментируйте с мобильными устройствами, чтобы быть уверенным, что с производительностью у вас все в порядке.
Доступность в современных браузерах
На данный момент ряд CSS эффектов «filter » доступны в WebKit -браузерах и Mozilla Firefox . В ближайшее время мы ожидаем того же и в Opera , а также в Internet Explorer 10 .
Так как спецификация находится в стадии разработки, некоторые производители браузеров реализовали этот материал с помощью префиксов. Таким образом, в WebKit вам нужно использовать ‘-webkit-filter ’, в Mozilla Firefox ‘-moz-filter ’. Кроме того следите за версиями, выходящими для других браузеров, по мере их релиза.
Не все браузеры будут поддерживать абсолютно все эффекты фильтров, поэтому набор фильтров будет варьироваться для разных платформ. В настоящее время браузер Mozilla Firefox поддерживает только функцию ‘filter: url() ‘ — без вендорного префикса, поскольку ее реализация предваряет другие функции эффектов.
Ниже мы просуммировали основные эффекты CSS фильтров, доступные в различных браузерах, приведя для них приблизительные показатели производительности, когда они реализуются в различном программном обеспечении.
Обратите внимание, что ряд современных браузеров начинают реализовывать их в аппаратных средствах (доступно GPU -ускорение). Когда для них предусмотрена поддержка GPU , для более медленных эффектов производительность будет значительно улучшена. Как обычно, провести тестирование в разных браузерах — это лучший способ оценить их работу.
Перевод статьи «Understanding CSS Filter Effects » был подготовлен дружной командой проекта .
CSS свойства достигли такого уровня развития, что способны справиться с некоторыми важными функциями графических редакторов. Пример тому – CSS-фильтры, с помощью которых можно создавать красивые эффекты для изображений.
Если раньше трудно было это даже представить, то сейчас в каскадной таблице реализованы практически все программные фильтры, начиная от размытия и заканчивая художественно-цветовыми моделями.
Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.
Поддержка CSS фильтров браузерами
В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.
| Браузер | Explorer | Chrome | Firefox | Safari | Opera | Android | iOS |
|---|---|---|---|---|---|---|---|
| Версия | no | 31+ | 35+ | 7+ | 18+ | 4.4+ | 6+ |
| filter | — | (-webkit-) | + | (-webkit-) | (-webkit-) | (-webkit-) | (-webkit-) |
Функции и синтаксис CSS фильтров
Во всех свойствах CSS имеются некие параметры, сочетающие в себе порядок прописывания значений. Свойство filter не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.
Синтаксис
Filter: название фильтра (процент значения) ; filter: url(img.svg); filter: blur(10px); filter: brightness(0.9); filter: contrast(150%); filter: drop-shadow(5px 5px 10px black); filter: grayscale(80%); filter: hue-rotate(60deg); filter: invert(80%); filter: opacity(50%); filter: saturate(50%); filter: sepia(40%); /* Применение нескольких фильтров */ filter: contrast(150%) grayscale (80%);
Список фильтров
| Фильтр | Описание |
|---|---|
| blur (px) | Фильтр для размытия изображения. Степень размытия указывается в пикселях. Если число не задано, то по умолчанию используется 0. |
| drop-shadow () | Тень. Альтернатива свойству box-shadow с аналогичными параметрами и тем же порядком прописывания. Исключением является четвертое значение «растяжение»: почти все браузеры его не поддерживают. |
| grayscale (%) | Фильтр «обесцветить». Применяются оттенки серого цвета к изображению в зависимости от указанного процента. Не допускается отрицательное значение, а оригинальность картинки равна 0. |
| brightness (%) | Настройка яркости изображения. Значение в 100% показывает исходную точку яркости. Регулировка совершается как отрицательно (-50%), так и положительно (150%). |
| contrast (%) | Настройка контрастности изображения. Как и в предыдущем фильтре, значение в 100% покажет исходную точку. Изменения можно задавать отрицательные (-20%) и положительные (120%). |
| hue-rotate (deg) | Поворотное наложение тона цвета. В зависимости от указанного градуса (от 0deg до 360deg) на изображение будет налаживается цвет, который определяется по цветовому кругу. |
| invert (%) | Инверсия изображения. Применяется значение от 0 до 100% без отрицательного параметра. |
| saturate (%) | Насыщенность изображения. Исходное положение определяется в 100% и не имеет отрицательного значения. |
| sepia (%) | Эффект сепия. Оригинальность картинки определяется в 0% и доступна до значения 100% без отрицания. |
| opacity (%) | Прозрачность картинки. Еще один фильтр, у которого есть аналогичное свойство opacity с таким же способам в использовании. Настройка допускается от 0 до 100% без отрицательного параметра. |
| url () | CSS ссылка на SVG элемент с определенным идентификатором #id. |
| initial | Устанавливает значение свойства по умолчанию. |
| inherit | Наследует все значения свойства своего родительского элемента. |
Примеры CSS filters
Мы подошли к интересной части статьи, в которой рассмотрим каждый фильтр в отдельности с примерами его применения. Для наглядности будут использоваться три картинки. Первая покажет исходную точку, облик оригинальности. Вторая послужит статичным примером в применении фильтра, а третья покажет hover-эффект, наведение курсора мыши на изображение.
Фильтр размытия
В графических редакторах фильтр размытия является незаменимым инструментом и часто применяемым в работе. Он способен непросто создавать расплывчатое изображение, а делать эффект фокусирования на определенном элементе при этом остальная часть изображения попадает под размытие. И многое другое.
В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efbl1 img{ filter: blur(2px); -webkit-filter: blur(2px); } /*для hover-эффекта*/ .efbl2 img{ transition: all 0.6s ease 0s; } .efbl2:hover img{ filter: blur(4px); -webkit-filter: blur(4px); transition: all 0.6s ease 0s; }
Фильтр тень
Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.
Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента.
Также интересным является то, что когда у блока нет фона, а лишь задана обводка border , то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efdrswd1 img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); } /*для hover-эффекта*/ .efdrswd2 img{ transition: all 0.6s ease 0s; } .efdrswd2:hover img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); transition: all 0.6s ease 0s; }
Фильтр обесцвечивания
Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efgrays1 img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); } /*для hover-эффекта*/ .efgrays2 img{ transition: all 0.6s ease 0s; } .efgrays2:hover img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); transition: all 0.6s ease 0s; }
Фильтр яркости
Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efbrig1 img{ filter: brightness(150%); -webkit-filter: brightness(150%); } /*для hover-эффекта*/ .efbrig2 img{ transition: all 0.6s ease 0s; } .efbrig2:hover img{ filter: brightness(150%); -webkit-filter: brightness(150%); transition: all 0.6s ease 0s; }
Фильтр контрастности
Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efcontr1 img{ filter: contrast(150%); -webkit-filter: contrast(150%); } /*для hover-эффекта*/ .efcontr2 img{ transition: all 0.6s ease 0s; } .efcontr2:hover img{ filter: contrast(150%); -webkit-filter: contrast(150%); transition: all 0.6s ease 0s; }
Фильтр тона цвета
Отличный дизайнерский прием в оформлении изображения, под стиль основного дизайна ресурса. Суть заключается в наложении оттенка выбранного цвета на исходную картинку. Соотношения выходят в зависимости от заданного градуса, который указывает точку цвета на цветовом круге.
Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efhrotai1 img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); } /*для hover-эффекта*/ .efhrotai2 img{ transition: all 0.6s ease 0s; } .efhrotai2:hover img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); transition: all 0.6s ease 0s; }
Фильтр инверсия
Специфический эффект, позволяющий перевернуть цвет изображения верх дном. В графических редакторах имеет определенную роль и бывает так, что без его участия не добиться нужного результата. Параметр фильтра инвертирования указывается лишь в положительную сторону от значения 0% до 100%.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efinve1 img{ filter: invert(100%); -webkit-filter: invert(100%); } /*для hover-эффекта*/ .efinve2 img{ transition: all 0.6s ease 0s; } .efinve2:hover img{ filter: invert(100%); -webkit-filter: invert(100%); transition: all 0.6s ease 0s; }
Фильтр насыщенность
Когда изображение теряет свой естественный цвет красок по неизвестным причинам (что-то вроде выгоревшей футболки на солнце), то увеличением насыщенности можно вмиг восстановить прежний вид. А если этот фильтр использовать в сочетании с другими фильтрами, результат будет весьма удовлетворительным. Настройка совершается от 0 исходный вид, до больших чисел.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efsatut1 img{ filter: saturate(165%); -webkit-filter: saturate(165%); } /*для hover-эффекта*/ .efsatut2 img{ transition: all 0.6s ease 0s; } .efsatut2:hover img{ filter: saturate(165%); -webkit-filter: saturate(165%); transition: all 0.6s ease 0s; }
Фильтр сепия
Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efsepiaa1 img{ filter: sepia(100%); -webkit-filter: sepia(100%); } /*для hover-эффекта*/ .efsepiaa2 img{ transition: all 0.6s ease 0s; } .efsepiaa2:hover img{ filter: sepia(100%); -webkit-filter: sepia(100%); transition: all 0.6s ease 0s; }
Фильтр прозрачность
Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efopaty1 img{ filter: opacity(50%); -webkit-filter: opacity(50%); } /*для hover-эффекта*/ .efopaty2 img{ transition: all 0.6s ease 0s; } .efopaty2:hover img{ filter: opacity(50%); -webkit-filter: opacity(50%); transition: all 0.6s ease 0s; }
Фильтр ссылка
Создается собственный фильтр на основе SVG элементов с определенным идентификатором, который впоследствии можно используется в CSS через фильтр ссылку. Эффекты могут очень сильно отличаться от стандартных фильтров начиная от маски-наложения до банальной прозрачности.
Генератор CSS filters
Уже давно повелось создавать генераторы различных CSS свойств. , и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами CSS фильтров. Вот два из них для ознакомления:
Заключение
Обзор получился весьма немаленький, но надеюсь, что кому-то пригодится на практике. Также не забывайте комбинировать фильтры, один – хорошо, а два будет лучше, в определенных случаях.
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%); }
Можно применять несколько фильтров одновременно.
Какие фильтры доступны для использования в 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);
Можно создавать собственные фильтры с помощью SVG элемента filter и ссылаться на них из CSS. Каждый фильтр имеет свой id .
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 префикс не требуется.
Ниже приведена таблица совместимости фильтров с браузерами.
Бывает необходимо сделать изображение серым как можно быстрее и не используя графические редакторы. Конечно можно воспользоваться графическим редактором Adobe Photoshop(можно задать даже глубину и тон). В браузере конечно нельзя настраивать такие параметры, но наш глаз(если, конечно, вы не профессионал) почти не заметит разницы.
В этой статье мы рассмотрим способы как сделать изображение серым.
1. CSS фильтр
Использование свойства filter , пожалуй, является самым простым способом создать черно-белое изображение. Для создания черно-белого изображения в IE, необходимо использовать также свойство filter .
Сегодня, свойство filter является частью технологии CSS3, которое поддерживается такими браузерами как Firefox, Chrome и Safari. Webkit фильтры могут не только создавать эффект черно-белого изображения, но также могут придать эффект сепия и размытия.
Для того чтобы сделать изображение серым, необходимо прописать следующие свойства:
Данные код будет работать в IE6-9, Chrome18+, Safari 6.0+ и Opera15+.
2. Javascript
Альтернативой вышеприведенному коду является Javascript, который работает во всех браузерах, если он включен, включая IE6 и ниже.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var imgObj = document.getElementById ("js-image" ) ; function gray(imgObj) { var canvas = document.createElement ("canvas" ) ; var canvasContext = canvas.getContext ("2d" ) ; var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.width = imgW; canvas.height = imgH; canvasContext.drawImage (imgObj, 0 , 0 ) ; var imgPixels = canvasContext.getImageData (0 , 0 , imgW, imgH) ; for (var y = 0 ; y < imgPixels.height ; y++ ) { for (var x = 0 ; x < imgPixels.width ; x++ ) { var i = (y * 4 ) * imgPixels.width + x * 4 ; var avg = (imgPixels.data [ i] + imgPixels.data [ i + 1 ] + imgPixels.data [ i + 2 ] ) / 3 ; imgPixels.data [ i] = avg; imgPixels.data [ i + 1 ] = avg; imgPixels.data [ i + 2 ] = avg; } } canvasContext.putImageData (imgPixels, 0 , 0 , 0 , 0 , imgPixels.width , imgPixels.height ) ; return canvas.toDataURL () ; } imgObj.src = gray(imgObj) ; |
Используя Javascript, мы можем задавать изображению черно-белый эффект, например, при наведении и клике по изображению. Совместно можно использовать jQuery, чтобы создать плавный эффект перехода к серому. Единственным недостатком является то, что Javascript может быть отключен в браузере.
3. SVG
Другим способ является использование SVG фильтров.
Всё что вам нужно это создать SVG файл и использовать код ниже:
Также весь код можно написать прямо в CSS:
| 1 2 3 4 | img
{
filter
:
url
("url("data:image/svg+xml;utf8, |
Результат будет похожим.
Вывод
Для поддержки данного эффекта всеми браузерами, необходимо комбинировать все способы. Данный код будет работать в Firefox 3.5+, Opera15+, Safari, Chrome и IE.
| 1 2 3 4 5 6 7 8 | img { -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1 ) ; filter : grayscale(100% ) ; filter : url ("../img/gray.svg#grayscale" ) ; filter : gray ; } |
Данный код можно использовать вместе с Javascript, и в случае, если Javascript отключен, будет работать данный код. В этом может помочь Modernizr.
Modernizr добавляет js класс для body, если Javascript включен в браузере, и пропишет класс no-js если Javascript отключен. А в CSS осталось прописать сдедующее:
| 1 2 3 4 5 6 7 8 | .no-js img { -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1 ) ; filter : grayscale(100% ) ; filter : url ("../img/gray.svg#grayscale" ) ; filter : gray ; } |
Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.
Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.
Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.
Видео Filter CSS 3 – фильтры изображений:
Пример страницы, которую мы создаём в уроке:
Скачать файл-заготовку можно по .
Внимание! Свойство filters сейчас на стадии тестирования и поддерживается только браузером Firefox полностью. А браузером Chrome и другими на основе движка Webkit, это свойство работает только при добавлении префиксов. Префиксы я показываю в конце урока, поэтому рекомендую его сначала проходить на Firefox последней версии.
Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.
10 эффектов фильтров в CSS3
Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут!!!
1. Фильтр размытие - blur
Если говорить простым языком, то это обычное размытие картинки. Фильтр подойдет, если вам нужно сделать края более мягкими. За счет размытия создается ощущение фона, который не в фокусе.
Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:
Слева, для наглядности, я поставил обычную картинку, а вот справа то же самое изображение, только изменённое при помощи CSS3.
Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.
Фильтр яркость - brightness
Этот фильтр напоминает изменение яркости экрана телевизора. В данном случае регулируется цвет между черным и оригинальным цветом по мере добавления параметров.
А вот и наш подопытный конь:
Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% - оригинальным, а при 200% - станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.
Фильтр brightness может задаваться 3 способами:
- целые числа
- дробные числа
- проценты
Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.
3. Фильтр контрастность - contrast
Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% - это значение по умолчанию. 0% - черное изображение. А все, что больше 100%, добавляет вам контраст.
На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:
Вот результат:
Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно.
4. Фильтр насыщенность - saturate
Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение - 200%. Повысим насыщенность нашей картиночки в 2 раза.
Море стало заметно приятнее:
Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем??
5. Фильтр прозрачность - opacity
Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:
- проценты: от 0% до 100
Давайте попробуем уменьшить прозрачность на 50% следующей картинке.
Посмотрите, что вышло:
6. Фильтр Инверсия - invert
Он позволяет вам "переворачивать" цвета. На значения данного фильтра также вводятся ограничения:
- целые и дробные числа: от 0 до 1
- проценты: от 0% до 100
В нашем случае установим максимальное значение - 100 %:
И красивая спортивная машина лёгким движением руки превращается в...
Этот фильтр помог нам создать эффект негатива на самом изображении.
7. Фильтр cепия - sepia
Он позволит вам изменить цвет, добавив оттенок сепия. То есть вы получите имитацию старой фотографии. На значения фильтра ограничения указываются те же самые, что и в двух предыдущих.
- целые и дробные числа: от 0 до 1
- проценты: от 0% до 100
Ну что? Попробуемс?
Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет Кажется, у меня крыша потекла с этими примерами.
В нашем случае мы указали дробное значение - 0,5. Но вы можете экспериментировать, как вашей душе угодно!
8. Фильтр оттенки серого - grayscale
Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:
- целые и дробные числа: от 0 до 1
- проценты: от 0% до 100
Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 - к 100%.
Зададим значение - 0.7 (или 70%):
