Свойства фильтров css для версии firefox. CSS3 фильтры: изменяем изображения используя стили. Новая жизнь свойства CSS «filter»
В данной статье рассматриваются 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 » был подготовлен дружной командой проекта .
CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.
Как это работает?
Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами - это filter .
filter: filter(value) ;
Как и следовало ожидать, для этого свойства требуется использование префикса браузера. Но на данный момент, только -webkit- (Chrome и Safari) является единственным движком браузеров, поддерживающим это свойство.
Webkit-filter:
filter(value)
;
-moz-filter:
filter(value)
;
-o-filter:
filter(value)
;
-ms-filter:
filter(value)
;
Фильтрация
Существует целый ряд фильтров, поэтому, чтобы получить более полное представление о каждом из них, давайте рассмотрим их по отдельности. Несколько фильтров могут быть применены к одному элементу (через пробел), например, brightness и blur :
filter: blur(5px ) brightness(0.5 ) ;
Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:
Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.
Размытие
Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:
filter:
blur(5px
)
;
// Browser Specific
-webkit-filter:
blur(5px
)
;
-moz-filter:
blur(5px
)
;
-o-filter:
blur(5px
)
;
-ms-filter:
blur(5px
)
;
Яркость
Яркость измеряется от нуля до единицы, 1 - это полная яркость (белый цвет), а 0 - первоначальная яркость.
filter:
brightness(0.2
)
;
// Browser Specific
-webkit-filter:
brightness(0.2
)
;
-moz-filter:
brightness(0.2
)
;
-o-filter:
brightness(0.2
)
;
-ms-filter:
brightness(0.2
)
;
Насыщенность
Насыщенность измеряется в процентах.
filter:
saturate(50%
)
;
// Browser Specific
-webkit-filter:
saturate(50%
)
;
-moz-filter:
saturate(50%
)
;
-o-filter:
saturate(50%
)
;
-ms-filter:
saturate(50%
)
;
Поворот тона
Этот фильтр позволяет Вам изменять тон, повернув его (представьте себе колесо цветов, которые вы затем поворачиваете). Он измеряется в градусах.
filter:
hue-rotate(20deg)
;
// Browser Specific
-webkit-filter:
hue-rotate(20deg)
;
-moz-filter:
hue-rotate(20deg)
;
-o-filter:
hue-rotate(20deg)
;
-ms-filter:
hue-rotate(20deg)
;
Контрастность
Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!
filter:
contrast(150%
)
;
// Browser Specific
-webkit-filter:
contrast(150%
)
;
-moz-filter:
contrast(150%
)
;
-o-filter:
contrast(150%
)
;
-ms-filter:
contrast(150%
)
;
Инверсия
Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.
filter:
invert
(100%
)
;
// Browser Specific
-webkit-filter:
invert
(100%
)
;
-moz-filter:
invert
(100%
)
;
-o-filter:
invert
(100%
)
;
-ms-filter:
invert
(100%
)
;
Обесцвечивание
Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.
filter:
grayscale(100%
)
;
// Browser Specific
-webkit-filter:
grayscale(100%
)
;
-moz-filter:
grayscale(100%
)
;
-o-filter:
grayscale(100%
)
;
-ms-filter:
grayscale(100%
)
;
Сепия
Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% - это будет завершенная сепия, 0% - исходное изображение.
filter:
sepia(100%
)
;
// Browser Specific
-webkit-filter:
sepia(100%
)
;
-moz-filter:
sepia(100%
)
;
-o-filter:
sepia(100%
)
;
-ms-filter:
sepia(100%
)
;
Поддержка браузерами
| Webkit | Mozilla | Trident | Presto | |
| Размытие | Экспериментальная | Нет | Нет | Нет |
| Яркость | ||||
| Насыщенность | ||||
| Поворот тонов | ||||
| Контрастность | ||||
| Инверсия | Только полная инверсия |
|||
| Обесцвечивание | Экспериментальная | |||
| Sepia |
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим
CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.
Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.
Изначально фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.
Браузеры обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.
Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент:hover .
Поддержка браузерами
IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-
| filter | |
|---|---|
| blur() | Значение задается в единицах длины, например px , em . Применяет размытие по Гауссу к исходному изображению. Чем больше значение радиуса, тем больше размытие. Если значение радиуса не задано, по умолчанию берется 0 . Синтаксис filter: blur(3px); |
| brightness() | Значение задается в % или в десятичных дробях. Изменяет яркость изображения. Чем больше значение, тем ярче изображение. Значение по умолчанию 1 . Синтаксис filter: brightness(50%); filter: brightness(.5); |
| contrast() | Значение задается в % или в десятичных дробях. Регулирует контрастность изображения, т.е. разницу между самыми темными и самыми светлыми участками изображения/фона. Значение по умолчанию 100% . Нулевое значение скроет исходное изображение под темно-серым фоном. Значения, увеличивающиеся от 0 до 100% или от 0 до 1 , будут постепенно открывать исходное изображение до оригинального отображения, а значения свыше будут увеличивать контраст между светлыми и темными участками. Синтаксис filter: contrast(20%); filter: contrast(.2); |
| drop-shadow() | Фильтр действует подобно свойствам box-shadow и text-shadow . Использует следующие значения: смещение по оси Х смещение по оси Y размытость растяжение цвет тени. Отличительная особенность фильтра заключается в том, что тень добавляется к элементам и его содержимому с учетом их прозрачности, т.е. если элемент содержит текст внутри, то фильтр добавит тень одновременно для текста и видимых границ блока. В отличие от других фильтров, для этого фильтра обязательно задание параметров (минимальное - величина смещения). Синтаксис filter: drop-shadow(2px 3px 5px black); |
| grayscale() | Извлекает все цвета из картинки, делая на выходе черно-белое изображение. Значение задается в % или десятичных дробях. Чем больше значение, тем сильнее эффект. Синтаксис filter: grayscale(.5); filter: grayscale(50%); |
| hue-rotate() |
Меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от 0deg до 360deg . 0deg - значение по умолчанию, означает отсутствие эффекта. Синтаксис filter: hue-rotate(180deg); |
| invert() | Фильтр делает негатив изображения. Значение задается в % . 0% не применяет фильтр, 100% полностью преобразует цвета. Синтаксис filter: invert(100%); |
| opacity() | Фильтр работает аналогично со свойством opacity , добавляя прозрачность элементу. Отличительная особенность - браузеры обеспечивают аппаратное ускорение для фильтра, что позволяет повысить производительность. Дополнительный бонус - фильтр можно одновременно сочетать с другими фильтрами, создавая при этом интересные эффекты. Значение задается только в % , 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта. Синтаксис filter: opacity(30%); |
| saturate() | Управляет насыщенностью цветов, работая по принципу контрастного фильтра. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% - увеличивают насыщенность цвета. Значение может задаваться как в % , так и целым числом, 1 эквивалентно 100% . Синтаксис filter: saturate(300%); |
| sepia() | Эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект сепии. Синтаксис filter: sepia(150%); |
| url() | Функция принимает расположение внешнего XML-файла с svg-фильтром, или якорь к фильтру, находящемся в текущем документе. Синтаксис filter: url(#filterId); /* если фильтр находится в этом документе */ filter: url(filter.svg#filterId); /* если фильтр с id="filterId" находится в файле filter.svg*/ |
| none | Значение по умолчанию. Означает отсутствие эффекта. |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Бывает необходимо сделать изображение серым как можно быстрее и не используя графические редакторы. Конечно можно воспользоваться графическим редактором 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 ; } |
