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

[Dreddik]

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

[grokru]

Очень просто:

[Renius]

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

[Serator]

Существует более простой способ.

Ну а статья, собственно, не о чем. В интернете уже куча обзорных статей на тему этих фильтров. Лучше бы написали о том, чем, собственно, фильтр «drop-shadow» от свойства «box-shadow» отличается, фильтр opacity от свойства opacity… А отличия там есть и они существенны. И рассказали о том, что быстрее работает и в каких ситуациях (а здесь разница вполне заметна...). И про обратную совместимость посредством SVG / VML / проприетарных реализаций фильтров и иных фантазий. В общем хабр уже не торт.

[Renius]

Как-то я не очень доверяю «кучам обзорных статей» в этих ваших интернетах. В первую очередь, я ищу статьи на хабре, потому, что они тщательно задокументированы закоментированы несогласными. Если вы осведомлены о «существенных различиях фильтра opacity от свойства opacity»- напишите об этом, хабр от этого будет тортее гораздо.
Напишите обязательно, а то ваших статей я вообще не вижу. ;)

[Serator]

Я их как-то и не писал. В общем по поводу opacity, из того, что я знаю, при использовании фильтра возможна работа аппаратного ускорения, а при использовании свойства сего не произойдет. Скорее всего это не единственное различие. По теням есть неплохая статья. Да и вообще чего куда-то ходить, на хабре-то уже была более полная и интересная статья. Вот по этому я и не вижу смысла в замусировании хабра и сети в целом подобными статьями. Такое ощущение, что автор для себя открыл наличие фильтров, что уже давно не новость, и решил об этом чуде «чирикнуть» в хабр. Да еще и ярлычок «tutorial» прикрепил. Познавательно, ага…

[RUgaleFF]

Насыщенность цветов просто уменьшится ровно в два раза

[ssneg]

Просто grayscale было бы правильнее назвать saturation.

[Serator]

Выше уже дал ссылку. Посмотрите, чем фильтр «grayscale» от «saturate» отличается.

[ssneg]

Чем?

[Serator]

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

ru.wikipedia.org/wiki/Оттенки_серого
ru.wikipedia.org/wiki/Насыщенность_(цвет)

[ssneg]

Я не вижу разницы между изображениями saturate(0) и grayscale(1). Вернее, не то, что не вижу — а её нет (сравнил слои в фотошопе).

[Serator]

А я не увидел разницу между «saturate(1)», «grayscale(0)» и «none», так может его нужно было назвать «none»? Да и вообще все фильтры при определенных условиях одинаковую картинку показывают, а если монитор выключить, то…

[ssneg]

Не переживайте так.

[Dima_Sharihin]

Для серьезных проектов CSS3 filters пока, к сожалению, не применимы. Уж слишком простоваты эффекты.
Например нельзя тонировать и изменить контрастность изображения. Вместо этого есть вращение или grayscale. Но это не то

[psywalker]

Не сказал бы. Порой нужны именно простые эффекты, а чтобы их получить, приходится прибегать ко всяким тяжёлым костылям. А здесь одна строка в CSS решает проблему.

[PavlovM]

Тут дело даже не в простоте эффектов, а в том, что поддерживает их пока только webkit.
На серьезных проектах, поэтому, конечно нет. Но наступит золотая эра, наступит…

Вообще — штука очень даже приятная. Например, задача при hover изменять изображение с черно-белого на цветное или просто чуть изменять цветность — весьма популярна и фильтры в таком случае позволят избавиться от дублирования картинок, за что я им уже очень благодарен.

[blaq]

Мне понравился пример сравнения box-shadow и filter: drop-shadow

[PavlovM]

Дополню — все это работает не только с изображениями, но и с другими элементами — фоновые изображения, текст, границы и т.п. «засеряются», «засепляются» и «контрастятся» также прекрасно :)

[Anisotropic]

Только -webkit, их вообще не имеет смысла использовать. Разве что как концепт.
Хотя, в паре с transition можно было бы интересные эффекты придумать.

[PavlovM]

Год этак 2006, статья про удивительное свойство border-radius. Комментарий: «Только -moz, вообще не имеет смысла использовать. Разве что как концепт».

Ну вы поняли :)

[Mithgol]

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

Так как node-webkit использует WebKit, то там можно ожидать поддержку этих свойств либо прямо сейчас (впрочем, я не проверял ещё, так ли это), либо в ближайшем же будущем.

[Anisotropic]

К сожалению, или может быть к счастью, я верстальщик, и не пишу «кросс-платформенные приложения на node.js».
Понятно, что вот в таких случаях, привязываясь только к -webkit это можно использовать, как раньше использовали filter в IE.
Но в веб-дизайне, в веб-разработке это не применимо. А пост писался автором как раз в этом ключе.

[bolk]

Вебкит делает те же фильтры, которые MS сделал стопятьсот лет назад, только с другим синтаксисом, даже многие названия те же. И многие будут думать, что это новое и небывалое. Удивительно.

[k12th]

Вообще-то не вебкит их делает, а W3C (или WHATWG, не суть).

Но ничто не ново под луной, это да.

[Spaceoddity]

Странно Opera содействовала — ни один фильтр не поддерживается…

[Spaceoddity]

12.16 — ни один фильтр не срабатывает (через префикс, кажись, тоже пробовал) — а вроде как на момент публикации статьи довольно актуальная версия была.
P.S. CanIUse, кстати, довольно забавная штука — расползается страница в этой самой 12.16, так что, чтобы посмотреть какие свойства поддерживает престовская Opera, приходится открывать в Фоксе или Хроме. Чего уж там — смогли!))

[SeVit]

filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
progid:DXImageTransform.Microsoft.BasicImage(mirror=1)

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

ms filters — это не решение для web'a — это решение для Microsoft и достаточно глючный fast hack, выдаваемый за крутую фичу.

[bolk]

ну, можно написать и fliter:MotionBlur, будет работать. А потом причём тут конкретная реализация? Ну была она глючная, это как-то синтаксис определяет что ли?

[DeathCore]

Это не шутка?!

[Mithgol]

Нѣтъ, не шутка.

[barkalov]

Жаль, что blur не анимируется. (stable 22.0.1229.94 m)

[wiktar]

Анимируется через -webkit-transition.

[PavlovM]

«Делать было нечего».

Думаю, такое демо css-фильтров лучше подойдет к пятнице, чем кусок лондонской улицы :)

[Keyten]

Про CSS-фильтры уже много было на хабре. Статьи две-три точно. Зачем опять одно и то же?

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

[Adward]

перезалейте plz картинки.

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

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

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

Спасибо!

[barkalov]

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