Фильтры для изображений с CSS Filter Effects

  • Tutorial
В графических редакторах очень легко менять яркость или контраст изображений, применять различные фильтры. С недавних пор это можно делать и средствами CSS прямо на веб-страницах с помощью CSS Filter Effects.



Демонстрация / Скачать исходники / Спецификация Filter Effects 1.0

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


Как обычно, браузеры, поддерживающие данный параметр, можно посмотреть на caniuse.com:



Эффекты


Применение эффектов очень простое, например, такая конструкция применяется для перевода цветного изображения в черно-белое:

img {  
     -webkit-filter: grayscale(100%);  
}  




Сепия, аля Инстаграм:
img {  
     -webkit-filter: sepia(100%);  
}  




В обоих эффектах можно устанавливать уровень эффекта от 0 до 100%.

Яркость, 50%:
img {  
    -webkit-filter: brightness(50%);   
}  




brightness может принимать отрицательные значения, изображение будет затемняться:
img {  
    -webkit-filter: brightness(-50%);   
}  


При 100% эффекта contrast изображение не меняется, поэтому можно установить 200%:

img {  
    -webkit-filter: contrast(200%);   
}  




Эффекты можно комбинировать:
img {  
    -webkit-filter: grayscale(100%) contrast(150%);   
} 


Так можно получить красивый hover-эффект:
img:hover {  
    -webkit-filter: grayscale(0%);  
}  
img:hover {  
    -webkit-filter: sepia(0%);   
}  
img:hover {  
    -webkit-filter: brightness(0%);   
}  
img:hover {  
    -webkit-filter: contrast(100%);   
}  


Эффект blur:
img:hover {  
    -webkit-filter: blur(5px);   
}  


В спецификации подробно описаны остальные эффекты, такие как hue-rotate, invert и saturate. Но они гораздо менее применимы на живых проектах.

Примеры с сайта hongikat.com
Поделиться публикацией

Похожие публикации

Комментарии 44

    0
    Я может чего не понимаю, но как можно «засерить» изображение на половину, например? :)
      +3
      Очень просто:

        0
        Google Chrome: Открываете любую страницу. Правый клик по любой картинке -> inspect element. Должно внизу открыться окошко. во вкладке styles где element.style вставляете -webkit-filter: grayscale(50%). Должно прийти понимание.
          +6
          Существует более простой способ.

          Ну а статья, собственно, не о чем. В интернете уже куча обзорных статей на тему этих фильтров. Лучше бы написали о том, чем, собственно, фильтр «drop-shadow» от свойства «box-shadow» отличается, фильтр opacity от свойства opacity… А отличия там есть и они существенны. И рассказали о том, что быстрее работает и в каких ситуациях (а здесь разница вполне заметна...). И про обратную совместимость посредством SVG / VML / проприетарных реализаций фильтров и иных фантазий. В общем хабр уже не торт.
            +1
            Как-то я не очень доверяю «кучам обзорных статей» в этих ваших интернетах. В первую очередь, я ищу статьи на хабре, потому, что они тщательно задокументированы закоментированы несогласными. Если вы осведомлены о «существенных различиях фильтра opacity от свойства opacity»- напишите об этом, хабр от этого будет тортее гораздо.
            Напишите обязательно, а то ваших статей я вообще не вижу. ;)
              0
              Я их как-то и не писал. В общем по поводу opacity, из того, что я знаю, при использовании фильтра возможна работа аппаратного ускорения, а при использовании свойства сего не произойдет. Скорее всего это не единственное различие. По теням есть неплохая статья. Да и вообще чего куда-то ходить, на хабре-то уже была более полная и интересная статья. Вот по этому я и не вижу смысла в замусировании хабра и сети в целом подобными статьями. Такое ощущение, что автор для себя открыл наличие фильтров, что уже давно не новость, и решил об этом чуде «чирикнуть» в хабр. Да еще и ярлычок «tutorial» прикрепил. Познавательно, ага…
          +1
          Насыщенность цветов просто уменьшится ровно в два раза
            +1
            Просто grayscale было бы правильнее назвать saturation.
              –1
              Выше уже дал ссылку. Посмотрите, чем фильтр «grayscale» от «saturate» отличается.
                0
                Чем?
                  0
                  Если имеются проблемы с просмотром приведенного примера, то пользуйтесь поиском чтоли.

                  ru.wikipedia.org/wiki/Оттенки_серого
                  ru.wikipedia.org/wiki/Насыщенность_(цвет)
                    +1
                    Я не вижу разницы между изображениями saturate(0) и grayscale(1). Вернее, не то, что не вижу — а её нет (сравнил слои в фотошопе).
                      –1
                      А я не увидел разницу между «saturate(1)», «grayscale(0)» и «none», так может его нужно было назвать «none»? Да и вообще все фильтры при определенных условиях одинаковую картинку показывают, а если монитор выключить, то…
                        +1
                        Не переживайте так.
            +4
            Для серьезных проектов CSS3 filters пока, к сожалению, не применимы. Уж слишком простоваты эффекты.
            Например нельзя тонировать и изменить контрастность изображения. Вместо этого есть вращение или grayscale. Но это не то
              +1
              Не сказал бы. Порой нужны именно простые эффекты, а чтобы их получить, приходится прибегать ко всяким тяжёлым костылям. А здесь одна строка в CSS решает проблему.
                +4
                Тут дело даже не в простоте эффектов, а в том, что поддерживает их пока только webkit.
                На серьезных проектах, поэтому, конечно нет. Но наступит золотая эра, наступит…

                Вообще — штука очень даже приятная. Например, задача при hover изменять изображение с черно-белого на цветное или просто чуть изменять цветность — весьма популярна и фильтры в таком случае позволят избавиться от дублирования картинок, за что я им уже очень благодарен.
                +3
                Мне понравился пример сравнения box-shadow и filter: drop-shadow
                  +2
                  Дополню — все это работает не только с изображениями, но и с другими элементами — фоновые изображения, текст, границы и т.п. «засеряются», «засепляются» и «контрастятся» также прекрасно :)
                    +3
                    Только -webkit, их вообще не имеет смысла использовать. Разве что как концепт.
                    Хотя, в паре с transition можно было бы интересные эффекты придумать.
                      +2
                      Год этак 2006, статья про удивительное свойство border-radius. Комментарий: «Только -moz, вообще не имеет смысла использовать. Разве что как концепт».

                      Ну вы поняли :)
                        +2
                        Вообразите, что Вы пишете кросс-платформенное приложение (с GUI) на JavaScript, HTML5 и CSS3 при помощи Node.js и node-webkit.

                        Так как node-webkit использует WebKit, то там можно ожидать поддержку этих свойств либо прямо сейчас (впрочем, я не проверял ещё, так ли это), либо в ближайшем же будущем.
                          0
                          К сожалению, или может быть к счастью, я верстальщик, и не пишу «кросс-платформенные приложения на node.js».
                          Понятно, что вот в таких случаях, привязываясь только к -webkit это можно использовать, как раньше использовали filter в IE.
                          Но в веб-дизайне, в веб-разработке это не применимо. А пост писался автором как раз в этом ключе.
                        +7
                        Вебкит делает те же фильтры, которые MS сделал стопятьсот лет назад, только с другим синтаксисом, даже многие названия те же. И многие будут думать, что это новое и небывалое. Удивительно.
                          +2
                          Вообще-то не вебкит их делает, а W3C (или WHATWG, не суть).

                          Но ничто не ново под луной, это да.
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Странно Opera содействовала — ни один фильтр не поддерживается…
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  12.16 — ни один фильтр не срабатывает (через префикс, кажись, тоже пробовал) — а вроде как на момент публикации статьи довольно актуальная версия была.
                                  P.S. CanIUse, кстати, довольно забавная штука — расползается страница в этой самой 12.16, так что, чтобы посмотреть какие свойства поддерживает престовская Opera, приходится открывать в Фоксе или Хроме. Чего уж там — смогли!))
                            +4
                            filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
                            progid:DXImageTransform.Microsoft.BasicImage(mirror=1)

                            «с другим синтаксисом» в данном случае означает с жёсткой привязкой
                            к своей операционной системе, и своим проприетарным стандартам, DirectX в частности.

                            ms filters — это не решение для web'a — это решение для Microsoft и достаточно глючный fast hack, выдаваемый за крутую фичу.
                              0
                              ну, можно написать и fliter:MotionBlur, будет работать. А потом причём тут конкретная реализация? Ну была она глючная, это как-то синтаксис определяет что ли?
                              • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Это не шутка?!
                                +2
                                Нѣтъ, не шутка.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Жаль, что blur не анимируется. (stable 22.0.1229.94 m)
                                      0
                                      Анимируется через -webkit-transition.
                                      +2
                                      «Делать было нечего».

                                      Думаю, такое демо css-фильтров лучше подойдет к пятнице, чем кусок лондонской улицы :)
                                        +3
                                        Про CSS-фильтры уже много было на хабре. Статьи две-три точно. Зачем опять одно и то же?

                                        Переведите вот это вот, например: alteredqualia.com/css-shaders/article/ (про написание своих фильтров). Я пробовал разобраться и заодно перевести — не получилось (кстати могу скинуть переведённое начало, до заголовка «Как работают фильтры»).
                                          0
                                          перезалейте plz картинки.

                                          А по существу у меня вопрос:
                                          Решил за-blur-ить фон сайта, пока юзер выбирает чтото из меню. Повесил на событие ховера по менюхе класс blur для body (и удаление)

                                          body.blur {
                                            -webkit-filter: blur(1px);
                                            -moz-filter: blur(1px);
                                            filter: blur(1px);
                                          }

                                          всё хорошо, как только мыша находит на менюху — всё заблюривается и выглядит красиво, но меню заблюривается тоже.
                                          Не могли бы Вы мне подсказать, как исключить элементы меню от того, чтобы они расплывались вместе с родителем-body.

                                          Спасибо!
                                            0
                                            Никак. Нужно блурить контейнер, в котором лежит всё-кроме-меню.

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

                                          Самое читаемое