Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 21
Наконец-то!
Для canvas смысла в режимах наложения особого нет, т.к. там можно напрямую оперировать каналами rgba. Можно вообще любой фильтр описать. Не понятно поддерживаются ли режимы смешивания для текста, а именно для теней.
Если речь о обычном html-тексте, то для этого нужна поддержка как раз mix-blend-mode, которой пока нет по-умолчанию. Хотя в about:config (browser://flags) в некоторых случаях можно включить экспериментальную поддержку.
Это очень важная и нужная фича для бэкграудов и картинок, канвас и без этого может все, но он для другого.
можно. но для динамически изменяющегося изображения итератор по даже 800х600 = 480к проходов без распарралеливания физически не может уложиться в 1000мс / 60гц = 16 мс.
поверьте человеку, который в свое время исхитрился сделать эмуляцию альфа-слоя. Именно тогда я узнал, что while (i--) {} правда работает куда быстрее чем for(){}, а эти побитовые сдвиги со стрелочками — прелесть какие быстрые.
поверьте человеку, который в свое время исхитрился сделать эмуляцию альфа-слоя. Именно тогда я узнал, что while (i--) {} правда работает куда быстрее чем for(){}, а эти побитовые сдвиги со стрелочками — прелесть какие быстрые.
Предчувствую попоболь и еще большую войну с дизайнерами :(
А еще мне нравится фраза от дизайнеров «Я на хабре читал, что так можно!11». И не объяснишь, что «в ie не работает».
А еще мне нравится фраза от дизайнеров «Я на хабре читал, что так можно!11». И не объяснишь, что «в ie не работает».
Зачем это всё в вебе?
Сейчас популярен деффект инстаграма, виньетирование и прочее ненужное, при чем и не только в вебе, но и у фотографов. Что же нас ждет после повсеместного внедрения? Glass button и длинные тени сменятся обезображиванием фотографий повсеместно, аля инстаграм?
Для применения в дизайне сайтов — тоже не оправдано. Зачем тратить лишние ресурсы, пусть и пользователя, для искажения графики, если можно сразу сохранить графику как надо.
ЗЫ Для SVG и canvas — поддерживаю :D
Сейчас популярен деффект инстаграма, виньетирование и прочее ненужное, при чем и не только в вебе, но и у фотографов. Что же нас ждет после повсеместного внедрения? Glass button и длинные тени сменятся обезображиванием фотографий повсеместно, аля инстаграм?
Для применения в дизайне сайтов — тоже не оправдано. Зачем тратить лишние ресурсы, пусть и пользователя, для искажения графики, если можно сразу сохранить графику как надо.
ЗЫ Для SVG и canvas — поддерживаю :D
Я бы не стал так категорично отрицать необходимость этой возможности. По меньшей мере три проекта, которые я делал, использовали :hover эффект, когда черно-белая картинка при наведении становилась цветной. Приходилось для этого генерировать черно-белую на сервере, а пользователю прдгружать две. С данной техникой это все упрощается в разы.
Кроме того, часто бывает нужно покрутить оттенок для разного типа кнопок, сделанных сложной картинкой. Теперь это можно будет сделать двумя картинками — самой кнопкой и маской, а оттенок регулировать с помощью opacity.
Кроме того, часто бывает нужно покрутить оттенок для разного типа кнопок, сделанных сложной картинкой. Теперь это можно будет сделать двумя картинками — самой кнопкой и маской, а оттенок регулировать с помощью opacity.
А я не понимаю.
Ну вот вводили фильтры, которыми можно было сделать чуть светлее, темнее и т.д.
Так же были svg фильтры, которыми можно сделать серым картинку (не кроссбраузерно).
Есть канвас — которым можно сделать что угодно с картинкой и вставить куда угодно (через тот же base64).
А это зачем? Даже приведенный вами пример из жизни — это лишь подтверждает мои слова «обезображиванием фотографий».
Извините, а не пора ли тогда уже перейти на SVG, где цвет меняется парой цифр? Или если для SVG это сложно, то мне кажется такое надо делать или заранее или на стороне сервера. Зачем нагружать этим клиент?
Я люблю CSS3 и HTML5 и его возможности, но это считаю ненужное введение.
Ну вот вводили фильтры, которыми можно было сделать чуть светлее, темнее и т.д.
Так же были svg фильтры, которыми можно сделать серым картинку (не кроссбраузерно).
Есть канвас — которым можно сделать что угодно с картинкой и вставить куда угодно (через тот же base64).
А это зачем? Даже приведенный вами пример из жизни — это лишь подтверждает мои слова «обезображиванием фотографий».
Кроме того, часто бывает нужно покрутить оттенок для разного типа кнопок, сделанных сложной картинкой
Извините, а не пора ли тогда уже перейти на SVG, где цвет меняется парой цифр? Или если для SVG это сложно, то мне кажется такое надо делать или заранее или на стороне сервера. Зачем нагружать этим клиент?
Я люблю CSS3 и HTML5 и его возможности, но это считаю ненужное введение.
CSS-фильтры это конечно хорошо, но они действуют на все пиксели одновременно, тогда как с режимами наложения можно применять эффект по маске.
Давайте рассмотрим такой пример. Есть сайт, который предлагает пользователям заказать индивидуальный чехол с надписью. Чехол двухцветный и имеет несколько вариантов текстур. На сайте должно быть два ползунка меняющее эти два цвета по желанию пользователя, и поля для ввода текста, который накладывается сверху на текстуру чехла. Ваши действия?
Да, наверняка можно это сделать через Canvas или SVG, но они предполагают большее количество кода на JS, тогда как с CSS это сделать проще.
Каждой технологи, я считаю, можно найти свою область применения.
Давайте рассмотрим такой пример. Есть сайт, который предлагает пользователям заказать индивидуальный чехол с надписью. Чехол двухцветный и имеет несколько вариантов текстур. На сайте должно быть два ползунка меняющее эти два цвета по желанию пользователя, и поля для ввода текста, который накладывается сверху на текстуру чехла. Ваши действия?
Да, наверняка можно это сделать через Canvas или SVG, но они предполагают большее количество кода на JS, тогда как с CSS это сделать проще.
Каждой технологи, я считаю, можно найти свою область применения.
Это что значит, из photoshopa можно будет валидную верстку экспортировать?)
Теперь нельзя будет ругаться с дизайнером по поводу не скинутых в normal режимов наложения слоев в макете…
Поддерживают:… Firefox 30+ beta…
У меня на канале обновления Nightly Firefox 29a нормально отображал все примеры. Так что наверное стоит написать, что 29a+. Сейчас, правда, когда его запустил, он обновился до версии 32a…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Режимы наложения слоёв в Web