@SergeyKuzmich19 мар 2014 в 13:10

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

2 мин

27K

CSS * JavaScript * HTML *

Из песочницы

+43

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

@usualdesigner 19 мар 2014 в 13:48

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

@Paul_King 19 мар 2014 в 14:22

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

@Mezomish 19 мар 2014 в 15:21

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

@ksupipr 24 мар 2014 в 05:30

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

@ange007 19 мар 2014 в 14:34

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

@Envek 19 мар 2014 в 14:54

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

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

@Anonym 19 мар 2014 в 19:44

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

@Envek 20 мар 2014 в 14:00

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

@vasili4 20 мар 2014 в 18:13

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

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

@Anisotropic 19 мар 2014 в 18:16

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

@SergeyKuzmich 19 мар 2014 в 19:39

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

@Anisotropic 19 мар 2014 в 19:51

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

@jeppeQue 20 мар 2014 в 05:55

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

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

@ElleSolomina 19 мар 2014 в 21:56

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

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

@SergeyKuzmich 19 мар 2014 в 22:12

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

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

@Iforgot 20 мар 2014 в 11:34

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

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

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