Применение CSS Filter Effects

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

Для начала хотелось бы отметить что есть классный on-line редактор этих самых фильтров на appspot.com

Поддержка браузерами

На caniuse.com можно посмотреть и узнать какие бразуеры поддерживают данное свойство, что бы ориентироваться на необходимую целевую аудиторию. Тут вообщем-то нетрудно понять что пользователи chrome и mac как всегда в выйгрыше.

Классический IE, с которыми и так невозможно работать, как веб-разработчику, так и простому пользователю, естественно не поддерживает это свойствао и вместе с Opera mini даже не заслуживает дальнейшего обсуждения.

Chrome и Safari как десктопной, так и мобильной версии поддерживают это свойство на все 100%. Это неоднократно было протестировано и нами. Поэтому все обладатели iphone 4/4s/5c/5/5s и любого Android устройства с версией 4.4 ликуют и наслаждаются на все 100%, а разработчики радуются полученному результату с минимально затраченными усилиями. Преданные пользователи Opera и Firefox так же могут довольствоваться этим чудом сидя за компьютером.

Эффекты и их примеры

Мы не будем рассматривать все до единого фильтры свойства filter:[тип-фильтра]; , а лишь покажем некоторые из них в качестве примеров. Для работы корректной в Firefox префикс не требуется, а при работе на движке webkit классика в виде -webkit-filter:[тип-фильтра];

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

Вот к примеру очевидная разница после повышения насыщенности (saturation). Этим свойством можно отредактировать сразу всю галерею исходных изображений для любой маркетинговой цели. Стоит отметить что данный фильтр неплохо смотрится при использовании c псевдо-классом :hover

Ещё хороший и яркий пример с использванием фильтра blur (размытие). Посмотрите на мир со зрением -4. Признаться, картина неприятная.

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

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

В качестве неоценимых плюсов стоит выделить работу фильтра -webkit-filter: drop-shadow(1px 1px 10px color); с текстом или *.png изображениями c прозрачным фоном. Повторюсь, что при использовании псевдо-класса :hover можно добится отличной анимации. Ну и самое главное — фильтры можно использовать одновременно разделяя их "пробелом" внутри свойства filter:

Однозначно будем использовать в своих проектах такой мощный инструмент.