SergeyKuzmich 19 мар 2014 в 17:10

Отзывчивый дизайн. Реакция на уровень освещенности

2 мин

26K

CSS*JavaScript*HTML*

Из песочницы

+44

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

usualdesigner 19 мар 2014 в 17:48

Поигрался с демо на телефоне.

-11

Paul_King 19 мар 2014 в 18:22

Очень содержательный комментарий, спасибо)

+15

Mezomish 19 мар 2014 в 19:21

Вы вкладкой ошиблись, твиттер не здесь.

ksupipr 24 мар 2014 в 09:30

Держите нас в курсе, мы волнуемся.

ange007 19 мар 2014 в 18:34

Может добавите в демке ползунки для «эмулирования»?
А то выходит для того чтоб посмотреть демку — нужно установить ФФ на телефоне, найти статью, и перейти по ссылке.

Envek 19 мар 2014 в 18:54

Так же работает на ноутбуках, оснащённых датчиками света. Например на макбуках с макосью.

Реагирующая на свет веб-страница произвела небольшой локальный фурор среди коллег.

+13

Anonym 19 мар 2014 в 23:44

А в каких браузерах?
Проверил последние Chrome, FF, Safari — страница не реагирует на освещенность, а в FF еще и трекбар не работает.
UPD: FF не до конца обновился. В версии 28 всё заработало.

Envek 20 мар 2014 в 18:00

У меня работало в 27-м файрфоксе.

vasili4 20 мар 2014 в 22:13

в хроме работает даже, фонариком айфона посвети в область камеры макбука.

только вот у меня фон не становился белым даже при прямой наводке фонаря в камеру.

Anisotropic 19 мар 2014 в 22:16

А оформить как перевод? И дать ссылку на оригинал? girliemac.com/blog/2014/01/12/luminosity/
И я уже переводил эту статью на русский. Но на хабре не публиковал, всё-таки кросс-постинг нло не приветствуется…

SergeyKuzmich 19 мар 2014 в 23:39

Видать потому, что это не перевод все же, а сборка из материала из нескольких ресурсов. И я прекрасно понимаю что нужно указывать первоисточники, но в данном случае, думаю, указывать иные блоги, где есть подобные статьи, не стоит из-за их количества. Ссылки на документы и спецификации даны.
Нет я все же не претендую на 100% уникальный контент.

-6

Anisotropic 19 мар 2014 в 23:51

У вас не сборка из нескольких ресурсов, а выжимка одной статьи плюс переделанная демка. В коде в этом посте в одном месте класс изменён с dim на dark. Я же дал ссылку на первоисточник, с которого вы всё это взяли.

jeppeQue 20 мар 2014 в 09:55

Серёжа молодец! Не занимайся копипастией.

НЛО прилетело и опубликовало эту надпись здесь

ElleSolomina 20 мар 2014 в 01:56

В демо отлично показан принцип! Вот если туда ещё более плавное изменение* добавить вместо жёстких переходов, будет вообще сказка.

* не на каждый шаг конечно, но уровней надо явно побольше чем 3, по моим прикидкам, хотя бы 10, а на деле может и побольше.

SergeyKuzmich 20 мар 2014 в 02:12

В данной демке приведен пример реализации запланированной возможности в CSS Media Queries 4. В ней же представлено три вида отображения dim, normal и washed. Единственное что можно сгладить это переходы между состояниями.

НЛО прилетело и опубликовало эту надпись здесь

Iforgot 20 мар 2014 в 15:34

Считаю, что эту задачу (контраст отображения) должно выполнять устройство, а не контент в устройстве.

НЛО прилетело и опубликовало эту надпись здесь

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время

Отзывчивый дизайн. Реакция на уровень освещенности

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

Публикации

Истории