Как стать автором
Поиск
Написать публикацию
Обновить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо!
Комментарий пока не оценивали0
Никак. Нужно блурить контейнер, в котором лежит всё-кроме-меню.
Комментарий пока не оценивали0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2024, Habr