How to become an author
Search
Write a publication
Pull to refresh

Comments 43

Я может чего не понимаю, но как можно «засерить» изображение на половину, например? :)
Total votes 2: ↑1 and ↓10
Google Chrome: Открываете любую страницу. Правый клик по любой картинке -> inspect element. Должно внизу открыться окошко. во вкладке styles где element.style вставляете -webkit-filter: grayscale(50%). Должно прийти понимание.
Total votes 2: ↑1 and ↓10
Существует более простой способ.

Ну а статья, собственно, не о чем. В интернете уже куча обзорных статей на тему этих фильтров. Лучше бы написали о том, чем, собственно, фильтр «drop-shadow» от свойства «box-shadow» отличается, фильтр opacity от свойства opacity… А отличия там есть и они существенны. И рассказали о том, что быстрее работает и в каких ситуациях (а здесь разница вполне заметна...). И про обратную совместимость посредством SVG / VML / проприетарных реализаций фильтров и иных фантазий. В общем хабр уже не торт.
Total votes 6: ↑6 and ↓0+6
Как-то я не очень доверяю «кучам обзорных статей» в этих ваших интернетах. В первую очередь, я ищу статьи на хабре, потому, что они тщательно задокументированы закоментированы несогласными. Если вы осведомлены о «существенных различиях фильтра opacity от свойства opacity»- напишите об этом, хабр от этого будет тортее гораздо.
Напишите обязательно, а то ваших статей я вообще не вижу. ;)
Total votes 1: ↑1 and ↓0+1
Я их как-то и не писал. В общем по поводу opacity, из того, что я знаю, при использовании фильтра возможна работа аппаратного ускорения, а при использовании свойства сего не произойдет. Скорее всего это не единственное различие. По теням есть неплохая статья. Да и вообще чего куда-то ходить, на хабре-то уже была более полная и интересная статья. Вот по этому я и не вижу смысла в замусировании хабра и сети в целом подобными статьями. Такое ощущение, что автор для себя открыл наличие фильтров, что уже давно не новость, и решил об этом чуде «чирикнуть» в хабр. Да еще и ярлычок «tutorial» прикрепил. Познавательно, ага…
This comment wasn’t rated yet0
Насыщенность цветов просто уменьшится ровно в два раза
Total votes 1: ↑1 and ↓0+1
Просто grayscale было бы правильнее назвать saturation.
Total votes 1: ↑1 and ↓0+1
Выше уже дал ссылку. Посмотрите, чем фильтр «grayscale» от «saturate» отличается.
Total votes 1: ↑0 and ↓1-1
Я не вижу разницы между изображениями saturate(0) и grayscale(1). Вернее, не то, что не вижу — а её нет (сравнил слои в фотошопе).
Total votes 3: ↑2 and ↓1+1
А я не увидел разницу между «saturate(1)», «grayscale(0)» и «none», так может его нужно было назвать «none»? Да и вообще все фильтры при определенных условиях одинаковую картинку показывают, а если монитор выключить, то…
Total votes 3: ↑1 and ↓2-1
Не переживайте так.
Total votes 3: ↑2 and ↓1+1
Для серьезных проектов CSS3 filters пока, к сожалению, не применимы. Уж слишком простоваты эффекты.
Например нельзя тонировать и изменить контрастность изображения. Вместо этого есть вращение или grayscale. Но это не то
Total votes 4: ↑4 and ↓0+4
Не сказал бы. Порой нужны именно простые эффекты, а чтобы их получить, приходится прибегать ко всяким тяжёлым костылям. А здесь одна строка в CSS решает проблему.
Total votes 1: ↑1 and ↓0+1
Тут дело даже не в простоте эффектов, а в том, что поддерживает их пока только webkit.
На серьезных проектах, поэтому, конечно нет. Но наступит золотая эра, наступит…

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

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

Так как node-webkit использует WebKit, то там можно ожидать поддержку этих свойств либо прямо сейчас (впрочем, я не проверял ещё, так ли это), либо в ближайшем же будущем.
Total votes 2: ↑2 and ↓0+2
К сожалению, или может быть к счастью, я верстальщик, и не пишу «кросс-платформенные приложения на node.js».
Понятно, что вот в таких случаях, привязываясь только к -webkit это можно использовать, как раньше использовали filter в IE.
Но в веб-дизайне, в веб-разработке это не применимо. А пост писался автором как раз в этом ключе.
This comment wasn’t rated yet0
Вебкит делает те же фильтры, которые MS сделал стопятьсот лет назад, только с другим синтаксисом, даже многие названия те же. И многие будут думать, что это новое и небывалое. Удивительно.
Total votes 11: ↑9 and ↓2+7
Вообще-то не вебкит их делает, а W3C (или WHATWG, не суть).

Но ничто не ново под луной, это да.
Total votes 2: ↑2 and ↓0+2
UFO just landed and posted this here
Странно Opera содействовала — ни один фильтр не поддерживается…
This comment wasn’t rated yet0
UFO just landed and posted this here
12.16 — ни один фильтр не срабатывает (через префикс, кажись, тоже пробовал) — а вроде как на момент публикации статьи довольно актуальная версия была.
P.S. CanIUse, кстати, довольно забавная штука — расползается страница в этой самой 12.16, так что, чтобы посмотреть какие свойства поддерживает престовская Opera, приходится открывать в Фоксе или Хроме. Чего уж там — смогли!))
This comment wasn’t rated yet0
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
progid:DXImageTransform.Microsoft.BasicImage(mirror=1)

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

ms filters — это не решение для web'a — это решение для Microsoft и достаточно глючный fast hack, выдаваемый за крутую фичу.
Total votes 6: ↑5 and ↓1+4
ну, можно написать и fliter:MotionBlur, будет работать. А потом причём тут конкретная реализация? Ну была она глючная, это как-то синтаксис определяет что ли?
Total votes 2: ↑1 and ↓10
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Жаль, что blur не анимируется. (stable 22.0.1229.94 m)
This comment wasn’t rated yet0
Анимируется через -webkit-transition.
This comment wasn’t rated yet0
Про CSS-фильтры уже много было на хабре. Статьи две-три точно. Зачем опять одно и то же?

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

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

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

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

Спасибо!
This comment wasn’t rated yet0
Никак. Нужно блурить контейнер, в котором лежит всё-кроме-меню.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr