Comments 73
У вас секундная стрелка не симметрична (Safari). Когда 0 или 15/30/45 секунд очень заметно.
Ага… и горизонт завален. А вообще я охренел от этого примера! Это крутотень!!!
Это бесподобно! Перед тем, как прочел статью, сразу посмотрел пример. И первый вопрос возник: Как в css определить текущее время!? Конечно же, пара строчек javascript это не кошерно, но сервером генерить css-ку — это, как мне кажется, еще более не кошерно. Зато в заголовке можно смело указывать «без javascript». Видимо, причина не использовать JS таится только в красоте заголовка.
Ничего подобного.
Есть какие то правила которые устанавливаешь для себя и потом их придерживаешься. Вот и все.
Та же история например с логотипом CSS3. Захотелось вставить на страницу, но поскольку установил для себя не использовать графику, пришлось реализовать средствами CSS
Есть какие то правила которые устанавливаешь для себя и потом их придерживаешься. Вот и все.
Та же история например с логотипом CSS3. Захотелось вставить на страницу, но поскольку установил для себя не использовать графику, пришлось реализовать средствами CSS
Так неплохо, если не обращать внимания, что один процессор съедается на 100% :-)
Сафари, МакОС, не вижу никакой новой нагрузки на процессор при открытии примера.
Win 7 Pro x64 один проц забивается процентов под 80-90.
Сафари, МакОС, не вижу никакой новой нагрузки на процессор при открытии примера.
Зависит от драйверов на видяху
С сервера открываете? Или все же ядро?
Ubuntu, голый chromium. Одно ядро на 69%
У меня куллер на повышеных оборотах закрутился после открытия вкладки. А пример Очень крутой.
UFO just landed and posted this here
Ipad3 chrome.
При попытке проскролить часы замирают.
Практически — не применимо, академически — просто офигенно.
При попытке проскролить часы замирают.
Практически — не применимо, академически — просто офигенно.
Практически все доводиться до ума при возможности и необходимости :)
При попытке проскроллить в АйОсе замирают процессы отрисовки, недавно на «Хабре» статья была хорошая про тормоза «Андроида», там это разбиралось. Это by design.
Я несколько «оптимизировал» пример.
У меня в эмуляторе теперь процессор не загружается на все 100%.
Думаю и у вас должно быть хорошо.
У меня в эмуляторе теперь процессор не загружается на все 100%.
Думаю и у вас должно быть хорошо.
Охренеть. Больше слов нет. Да, баги есть, но это всё равно очень круто. Спасибо вам.
Да, как живые, даже лучше — на моих секундной стрелки нет =) img-fotki.yandex.ru/get/4122/59225420.3/0_ac398_b82b16a6_XL.jpeg.jpg
(риторический вопрос) Мне одному кажется, что развитие CSS пошло куда-то не туда?
(вопрос к автору) Сколько времени заняла у Вас разработка этих часов? Без учёта «изучения фотографий для правдоподобного хромирования». Хотя бы примерно — 2 часа, 8 часов, 20 часов, 80 часов?
(вопрос к автору) Сколько времени заняла у Вас разработка этих часов? Без учёта «изучения фотографий для правдоподобного хромирования». Хотя бы примерно — 2 часа, 8 часов, 20 часов, 80 часов?
(ответ на вопрос мне лично) Сама собственно база за полдня сделана — она достаточно простая.
А вот с рамкой, да совместимость под разные браузеры, еще часов 20 наверное ушло. да, похоже на то.
(попытка ответа на риторический вопрос) CSS страшно гонят Apple да Google.
Уже можно посмотреть что ждет в будующем.
Из хорошего — текстовые регионы и обработка корректного заполнения форм.
Из сомнительного — шейдеры.
Как по мне так я думаю в перспективе CSS должен впитывать в себя все типовые задачи по оформлению UI,
которые сейчас решаются через JS. И это правильно.
А вот с рамкой, да совместимость под разные браузеры, еще часов 20 наверное ушло. да, похоже на то.
(попытка ответа на риторический вопрос) CSS страшно гонят Apple да Google.
Уже можно посмотреть что ждет в будующем.
Из хорошего — текстовые регионы и обработка корректного заполнения форм.
Из сомнительного — шейдеры.
Как по мне так я думаю в перспективе CSS должен впитывать в себя все типовые задачи по оформлению UI,
которые сейчас решаются через JS. И это правильно.
Нет, не вам одному. С помощью языка разметки гипертекстовых документов и набора правил оформления к нему теперь можно нарисовать вот такие офигенные часы. Часы и правда классные, но не могу выкинуть из головы картинку с троллейбусом из хлеба.
Надолго оставлять пробовали? Рассинхрон стрелок будет, как мне кажется, из-за задержек между последовательными анимациями секундной стрелки.
после 5 минут созерцания, все стрелки разъехались и вывалились из циферблата)
WinXP, Opera последняя на сегодня
WinXP, Opera последняя на сегодня
Очень заинтересовала деградация с IE9 до IE10
Где в MS накосячили?
Где в MS накосячили?
На все вопросы «Но зачем?» отвечайте — потому что могу.
Автор, Вы — круты.
Автор, Вы — круты.
По поводу «Показываем актуальное время», мне одному кажется, что время будет не самым точным при таком подходе? Время загрузки css с вашего сайта у меня порядка пары секунд.
UFO just landed and posted this here
Время задается с помощью предустановленных углов поворота стрелок, автор же целый абзац на это отвел!
Вот, смотрите: tezla.ru/rassadin/wall-clock-demo/
Вот, смотрите: tezla.ru/rassadin/wall-clock-demo/
Подключается внешний CSS-файл, который генерится скриптом.
Если я правильно понял, то проблемы с округлением при отрисовке меток в 25-ом хроме уже нет. По крайней мере их располагаются они нормально.
Ачууметь!
Мисье знает толк в извращениях! :)
Но действительно не понятно почему такая нагрузка.
Мисье знает толк в извращениях! :)
Но действительно не понятно почему такая нагрузка.
PID USER PR NI VIRT RES SHR S %CPU %MEM TIME+ COMMAND
8345 shushu 20 0 212m 48m 30m R 84 1.4 0:30.59 chrome
JavaScript, но это было бы не кошерно. Поэтому установкой времени занимается серверный скрипт
На сервере-то Гринвич :'(
На сервере GMT устанавливается просто потому, чтобы быть политически нейтральным :)
А так хоть в Петропавловске Камчатском можно генерировать.
Хотя все-таки по честному локальное время на клиенте без JS нормально не получить.
Хотя можно конечно базу IP->Timezone прикрутить и пытаться пользователям их локальное определять.
А так хоть в Петропавловске Камчатском можно генерировать.
Хотя все-таки по честному локальное время на клиенте без JS нормально не получить.
Хотя можно конечно базу IP->Timezone прикрутить и пытаться пользователям их локальное определять.
Ух ты, они не только офигительны, но еще и время правильно показывают!
Делали бы на Canvas — не знали бы проблем.
Пример безусловно крут и вызывает уважение. Однако мне чем дальше, тем больше кажется, что CSS3 это просто жесть. Мало того, что поддержка этого дела почти не реальна (вот вспомнит ли даже сам автор через год-другой, за что сей кусок отвечает:
.mr {
width:0.5em;
height:0.5em;
background:#222;
margin:-1.05em 0 0 3.74em;
border-radius:0.25em;
}Тем более подход — дурацкий. Вместо нормальной ежесекундной анимации у нас стрелка анимируется всё время, но просто две анимации направляют в разные стороны. Изменений на экране не происходит, а браузер думает, что происходят
Вы правильно заметили проблему вызывавшую снижение производительности,
и чтобы её обойти, я был вынужден заменил линейную анимацию на апроксимацию (см текст выше)
Но источник проблемы не в том, что я использую linear, а в том, что «браузер думает, что происходят» (изменения).
Фактически браузер, в отличии от отрисовки кодом в Canvas, имеет доступ к информации на предыдущем кадре, и может отслеживать и отрисовывать только изменения.
У Flash например с этим все впорядке, у CSS анимации с этим, как мы видем, все не очень хорошо.
А сложить два числа (две функции анимации) 60 раз в секунду, не должно вызывать таких больших проблем.
Я последние лет пять занимался ресурсоемком сложным графическим интерфейсов, и немножко отражаю что такие вопросы по оптимизации должны решаться исключительно движком, а не накладывать ограничения на возможности.
и чтобы её обойти, я был вынужден заменил линейную анимацию на апроксимацию (см текст выше)
Но источник проблемы не в том, что я использую linear, а в том, что «браузер думает, что происходят» (изменения).
Фактически браузер, в отличии от отрисовки кодом в Canvas, имеет доступ к информации на предыдущем кадре, и может отслеживать и отрисовывать только изменения.
У Flash например с этим все впорядке, у CSS анимации с этим, как мы видем, все не очень хорошо.
А сложить два числа (две функции анимации) 60 раз в секунду, не должно вызывать таких больших проблем.
Я последние лет пять занимался ресурсоемком сложным графическим интерфейсов, и немножко отражаю что такие вопросы по оптимизации должны решаться исключительно движком, а не накладывать ограничения на возможности.
Ну я так понимаю, изменения на самом деле есть, но они стремятся к нулю.
Конечно, что все эти 60 раз будет складываться два разных флоата, а они, как известно имеют погрешность. Лучше вообще эти анимации не запускать, пока стрелка должна стоять на месте.
На Канвасе можно всё очень вкусно и легко заоптимизировать так, что даже на самых слабых машинах оно будет работать очень быстро.
А сложить два числа (две функции анимации) 60 раз в секунду, не должно вызывать таких больших проблем.
Конечно, что все эти 60 раз будет складываться два разных флоата, а они, как известно имеют погрешность. Лучше вообще эти анимации не запускать, пока стрелка должна стоять на месте.
Фактически браузер, в отличии от отрисовки кодом в Canvas, имеет доступ к информации на предыдущем кадре, и может отслеживать и отрисовывать только изменения.
На Канвасе можно всё очень вкусно и легко заоптимизировать так, что даже на самых слабых машинах оно будет работать очень быстро.
Ну да есть такая особенность работы с числами в формате Floating Point. Никто не мешает движку определять является ли разница визуально различимой или нет.
Про Канвас я знаю. Канвас штука отличная и такие часы на нем пишутся за полдня и получаются отличными и относительно безглючными. Как-нибудь на нем тоже что-нибудь обязательно напишу, но для него надо нужна свежая и интересная идея.
Здесь задача стояла другая. Ну вы понимаете.
Про Канвас я знаю. Канвас штука отличная и такие часы на нем пишутся за полдня и получаются отличными и относительно безглючными. Как-нибудь на нем тоже что-нибудь обязательно напишу, но для него надо нужна свежая и интересная идея.
Здесь задача стояла другая. Ну вы понимаете.
это экспериментальный код. он специально написан так как написан и делает все так скажем на грани новых технологий.
если бы это был production код, то
1) были бы совершенно другие требования к совместимости и искуственных ограничений
2) что касается комментирования кода и названия идентификаторов, то был бы полный порядок
3) он бы не глючил и выглядел одинаково, потому что не достаточно отлаженные технологии и сырая функциональность просто бы не использовалась.
если бы это был production код, то
1) были бы совершенно другие требования к совместимости и искуственных ограничений
2) что касается комментирования кода и названия идентификаторов, то был бы полный порядок
3) он бы не глючил и выглядел одинаково, потому что не достаточно отлаженные технологии и сырая функциональность просто бы не использовалась.
UFO just landed and posted this here
а как часовой пояс менять?=)
Зашел на «playground @github-pages», браузер Хром, при смене размера разъезжаются стрелки, бегают отдельно от часов.
Т.е. пример работает только сферически и в вакууме.
Т.е. пример работает только сферически и в вакууме.
часики более менее безглючно ходят на codepen.io.
playground @github-pages — это эксперимент в рамках новых технологий цель которого не сделать рабочую везде версию, а оценить как с этими технологиями справляется ваш Хром (плохо). По результатам чего я сейчас как раз занимаюсь составлением баг репортов для разработчиков Webkit, Firefox и IE.
playground @github-pages — это эксперимент в рамках новых технологий цель которого не сделать рабочую везде версию, а оценить как с этими технологиями справляется ваш Хром (плохо). По результатам чего я сейчас как раз занимаюсь составлением баг репортов для разработчиков Webkit, Firefox и IE.
Asus tf300tg, Android 4.1
У меня планшет сферический в вакууме?
У меня планшет сферический в вакууме?
Про мое знакомство с HTML(CSS тогда еще не существовало)
Я познакомился с HTML в 1999 году и с тех пор от случая к случаю я занимался frontend-разработкой для веб, как правило, скорее как хобби, и очень изредка, как часть какого-нибудь большого рабочего проекта.
CSS был предложен в 1994 году, в 1996 была опубликована первая спецификация, в том же году был выпущен ie3 с поддержкой этой технологии.
Часы отлично подходят для рабочего стола веб-приложения «умного дома». На планшете, вроде, крутятся…
Хм… Что-то я не заметил тут логики:
Хотя… Если прищуриться и наклонить голову на pi/8 радиан, то.. не. Не катит.
Google Chrome (Версия 25.0.1364.97 m)
Google Chrome (Версия 25.0.1364.97 m)
По поводу векторизации — "Vector Magic" не пробовали?
Руками, разумеется, аккуратнее получится.
Например, те же цифры из часов (онлайн-версия, без ручной правки).
Руками, разумеется, аккуратнее получится.
Так, отлично. Реально симпатичные.
А можно ваши часики на рабочий стол в Windows поставить?
А на заставку?
А виджетом на андроид?
А можно ваши часики на рабочий стол в Windows поставить?
А на заставку?
А виджетом на андроид?
Sign up to leave a comment.
Пример — часы на СSS3 без изображений и JavaScript