0,0
рейтинг
28 февраля 2013 в 04:45

Разработка → Пример — часы на СSS3 без изображений и JavaScript



Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.

Для начала собственно сам пример — на codepen.io или на cssdesk.сom



Про мое знакомство с HTML


Я познакомился с HTML в 1999 году и с тех пор от случая к случаю я занимался frontend-разработкой для веб, как правило, скорее как хобби, и очень изредка, как часть какого-нибудь большого рабочего проекта. С 2012 года я ушел работать в freelance, а frontend-разработка для Web стала одним из наиболее востребованных навыков.

Часы


И так совпало, что копаясь в новогодние праздники в стопке старых CD и нашел там эту самую первую свою страницу, на которой я изучал HTML и позволившую в 1999 году мне автоматом получить зачет в институте. На ней был вставлен на Java апплет с часами.

А я как раз закончил небольшой проект с интенсивным использованием CSS3, и, идея сделать часы, но уже на чистом CSS3 лежала на поверхности. Я понимал, что такая идея для целей демонстрации модулей CSS3 Animation и CSS3 Transformation не будет новой, и решил сделать их хотя бы реалистично. Плюс я заранее решил не смотреть, как это реализовал кто-то еще. Ну а насколько у меня это получилось судить вам.

IKEA


Периодически бывая в IKEA, я часто обращал внимание на часы IKEA PUGG (картинка справа) из-за завораживающего шрифта цифр. Именно поэтому сначала в качестве макета были выбраны именно эти часы, но потом я нашел подобные часы у другого производителя и у них уже не было дурацкой ступенчатой окантовки корпуса.

Выбор размера и масштабирование c помощью font-size


Я сразу решил, что не будет привязан к пикселям, чтобы оставить возможность масштабирования.
Идеально бы подошли проценты, но была одна проблема. Поскольку бы решено не использовать графику, то цифры на циферблате нуждались в шрифте, а задать размер шрифта в процентах от размера блока не представлялось бы возможным.
Поэтому все версталось в em-единицах. Таким образом задать нужный размер часов, можно задав размер шрифта для блока. Изначально часы верстались размером в 100em x 100em и масштабировались через установку font-size.
Позже, из-за багов масштабирования и для целей демонстрации на codepen.io, я уменьшил “внутренний масштаб” до 10em.

Магия box-shadow


Для эффекта хромированной рамки понадобились три вложенных контейнера: первый для внешней части рамки, второй для внутренней части рамки, а третий представлял собой основание циферблата.

Сам по себе эффект быть создан за счет элементов теней в box-shadow для всех трех контейнеров. Использовалась как внешние, так и внутренние типы теней. Помочь понять принцип наложения теней, а также порядок и приоритет наложения поможет следующий псевдокод и картинка:

<div id="a"><div id="b"><div id="c">...</div></div></div>

#a { box-shadow:
		inset внутр.тень ai1, inset внутр.тень ai2, внешняя тень ao1, внешняя тень ao2;   }
#b { box-shadow:
		inset внутр.тень bi1, inset внутр.тень bi2, внешняя тень bo1, внешняя тень bo2;  }
#c { box-shadow:
		inset внутр.тень ci1, inset внутр.тень ci2, внешняя тень co1, внешняя тень co2; }



Чтобы добиться хотя бы небольшого правдоподобия хромирования пришлось изучить не один десяток фотографий, и не один час времени. Сам результат в CSS приводить я здесь не буду, желающие могут поэкспериментировать с получившимся кодом например на codepen.io

Размещаем метки


Дабы не плодить много сущностей и довольствоваться минимумом CSS правил была придумана следующая HTML разметка блока из пяти меток
<b><i><i><i><i></i></i></i></i></b>

Эти пять тэгов представляли собой метки минут с 0 по 4 и одновременно с 30 по 34. Вложенность тегов позволяла повернуть их относительно своей оси всего одним правилом в CSS
b > i, i > i  { transform:rotate(6deg) ; }

Сами метки рисовались при помощи верхнего (0-4) и нижнего (30-34) бордюра. C учетом оформления, мы получали из этих пяти тэгов следующий результат на выходе:



Оставшиеся пять блоков меток были размещены схожим методом путем размещения друг в друге:
<b><i>…<b><i>…<b><i>…<b><i>…<b><i>…<b><i>…</b></b></b></b></b></b>

Соответственно следующее правило размещало оставшиеся блоки по нужным местам
b>b { transform: rotate(30deg) ; }


Но на удивление такой простой код в условиях моего примера «поставил в затруднительное положение» большинство браузеров:


На удивление, правильный результат был показан только в IE9. В IE10 баги уже нашлись.

Firefox и браузеры на Webkit обнаружили в себе фундаментальный баг, связанный с округлением промежуточных значений координат при «вложенных» трансформациях. Из-за этого бага, как вы видите, происходит накапливание ошибки, и последние метки размещаются достаточно далеко от необходимого места.

Opera же вообще отказалась показывать трансформации правильно. Это конечно здорово, что Opera прошла ACID3, но на качестве другого кода, как мы видим это не отражается. И позже, я не был удивлен сворачиванием разработки Prestо, хотя, честно говоря, был расстроен.

Для того, чтобы обойти баги браузеров, пришлось использовать более топорную реализацию рисования меток. При этом я сохранил возможность переключения между версиями в своем playground-e для демонстрации рабочей версии с одной стороны и обнаруженных проблем с другой.

Цифры


Верстка цифр на циферблате не заслуживает особого внимания, красивого решения как в случае с метками не получилось. Существенно больше времени было потрачено на шрифт для цифр.

Так как обнаружить даже коммерческий шрифт, хотя бы похожий на тот, что используется в часах, мне не удалость, то решено было сделать свой шрифт, векторизовав цифры на картинке. Сразу отмечу, что не один из «векторизаторов» не смог выдать сколько-нибудь приемлемый результат, поэтому пришлось обрисовывать цифры вручную.

Для превращения изображения в собственно шрифт, было найдено хорошее руководство «How To Make Your Own Symbol Font», предлагающее для этого использовать следующую цепочку цепочку ПО:

[Изображение] -> Inkscape -> [SVG шрифт] -> freefontconverter.com -> [TTF шрифт] -> fontsquirrel.com/fontface/generator -> [Web-набор шрифтов]

Шрифт получился достаточно красивый, но с одной проблемой – из-за особенностей InkScape все буквы были одной ширины. Проблема решилась путем редактирования TTF шрифта с помощью бесплатного редактора шрифтов Type 3.2 Light.



Позже Chrome преподнес мне неожиданный сюрприз и к вопросу со шрифтом пришлось вернуться. Но об этом ниже.

Стрелки


Никаких сложностей при реализации часовой и минутной стрелки не наблюдалось, а для движения стрелок по циферблату в соответсвии со временем, как изначально планировалось, использовалась CSS3 анимация поворота стрелки периодом 12*60*60 сек и 60*60 сек, соответсвенно.

Движение было практически незаметно и, чтобы придать динамики часам, я решил добавить секундную стрелку. Реализовав движение секундной стрелки по образу и подобию остальных, я понял, что линейное движение секундной стрелки меня не устраивает, так как ступенчатое движение выглядит более привычно.

Замена свойства animation-function c linear на steps(60) была ближе к тому, чего хотелось, но со временем я стал замечать, что телепортация секундной стрелки с одной метки на другую выглядит неестественно.

Простейшим вариантом реализовать близкое к реальному движение секундной стрелки было бы расширение блока @keyframes отвечающего за анимацию, где потребовалось бы описать остановку стрелки на каждой из секундных меток.

Но лень — двигатель прогресса. Выше для меток я уже использовал трансформацию элемента, внутри которого трансформировался другой. И это подтолкнуло меня на следующую идею:

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



Одна функция поворота задается для анимации собственно стрелки, другая для анимации контейнера. В результате функция движения стрелки относительно экрана является суммой этих двух, то есть нужной мне ступенчатой функции, a код отвечающий за такое движение помещается в несколько строчек.

.container {
	animation: tick 1s normal infinite linear;
 }
@keyframes tick {
	0% { transform: rotate(0deg); }
	8.3% { transform:rotate(5.5deg); }
	100% { transform: rotate(0deg); }		
}
.arrow {
	animation: a360 60s normal infinite linear; 
}
@keyframes a360  {
	0% { transform: rotate(0deg) }
	100% { transform: rotate(360deg) }
}


UPDATE:
Всвязи с жалобами на перформанс казалось бы простейшего движения стрелок, был проведен небольшой reseach и все линейные функции анимации были заменены аппроксимацией. Например, в коде анимации минутной стрелки теперь вместо linear можно красуется steps(3600) .

Тени


Реализовав стрелки я немедленно добавил тень для них с использованием box-shadow и прозрачности. Кроме неприятного бага с тенью при ступенчатом движении секундной стрелки, обнаружилось следующая неприятная картина наложения теней в центре.



Поэтому box-shadow было удалена, а тень реализована путем создания копии стрелок с заливкой цвета тени и размещенной под цифрами и метками. Для этого пришлось добавить несколько тэгов и пару CSS правил.

Показываем актуальное время


Конечно часы на то и часы, а не секундомер, и должны показывать актуальное время. Это можно было бы сделать при помощи пары строчек на JavaScript, но это было бы не кошерно. Поэтому установкой времени занимается серверный скрипт, генерирующий CSS с предустановленными значениями углов поворота стрелок на момент запроса. И да, используется Greenwich Meridian Time.

Playground


Получившийся CSS3 без фиксов получился достаточно небольшим – чуть более 200 правил, и никакого copy-paste кода. HTML код тоже получился достаточно компактен и соответствует парадигме: одна сущность – один тэг.

Но поняв, что результат, работающий во всех браузерах значительно отличается от чистого СSS3, я сделал небольшую страницу-тест, где кроме собственно часов можно посмотреть и оценить насколько хорошо браузер справляется с версией без фиксов.

Собственно playground @github-pages

Совместимость и баааааги.


Часы разрабатывались в Firefox (no prefixes!), и, по мере разработки, проверялись в последних версиях всех достаточно популярных браузерах. Но признаю, что качественный результат меня удивил. Лучше всех походу разработки справлялся с реализацией стандартов IE9(sic!), очень жаль что отсутствие поддержки CSS анимации вывело его из игры.

Что касается остальных браузеров, то по-видимому, скорость внедрения новой СSS функциональности значительно сказалась на качестве результата (в плохую сторону), что отразилось даже на IE10.

Один общий для нескольких браузеров баг (будем называть мета-багом) с расчетом трансформаций я описал выше. Единственное, стоит добавить, что в результате использования встроенного в эти браузеры масштабирования, мы получаем еще более значительные артефакты.

Второй «мета-баг», который оказался общим для всех браузеров кроме IE – это нарушение анимации стрелок при изменении размера часов. Баг отлично воспроизводится, когда одновременно с анимацией стрелок мы изменим размер часов с участием CSS3 transition.

Webkit (Chrome)


После похорон Presto, можно констатировать, что из трех оставшихся Webkit – как самый богатый на СSS3 функциональность движок, одновременно является наиболее глючным по результатам этого примера.

Бага с размером

Если вы уже открыли покопались в playgroundе с помощью Chrome, то увидели ее сразу.
При некоторых задаваемых размерах шрифта, в Webkit отчего-то нарушается расчет em размеров, и часы отказываются уменьшаться.

Сюрприз со шрифтом

Когда часы были почти закончены, и я стал готовиться к public презентации, я неожиданно заметил, что в Chrome цифры циферблата потеряли antialiasing.

Путем манипуляций было выяснено, что виной тому анимация стрелок в границах текста цифр. Долгое плутание по интернету ничего не дало, кроме кучи бесполезных специфических CSS свойств, которые должны были управлять сглаживанием. То есть на лицо просто баг Сhrome под Windows.

К счастью я наткнулся на интересную статью касающуюся библиотек, используемых Chrome для рендеринга шрифтов под Windows. Это дало мне идею попробовать сконвертировать Truetype шрифт в PostScript шрифт – и ура! сглаживание вновь появилось.



Что касается PostScript шрифта, то конвертация TrueType-кривых в PostScript-кривые была сделана при помощи редактора шрифтов Type3.2 Light и для возможности подключения на страницу шрифт был сохранен в OpenType формате.

По ходу пьесы также выяснилось, что Chrome под Windows, используя те же системные библиотеки что например и IE, не обратил внимание на заданную в OpenType таблицу кернинга, что не выгодно отличает его от Firefox.

Итоги


По истечении неожиданно большого количества времени мне все-таки удалось закончить вроде бы простой демонстрационный пример, сделать свой маленький playground и написать эту статью.

На мой взгляд, что получилость, с точки зрения CSS3:
• Ступенчатое дижение секундной стрелки
• Псевдо-хромированный обод часов
• Инскементивное размещение меток с помощью transform: rotate
• Возможность изменять размер часов путем установки font-size для контенера.
• Набольшой размер CSS файла (без учета кросс-броузерной совместимости)
и отсутсвие повторяющихся кусков в CSS коде
• Небольшой HTML, одна сущность — один тег

Ссылки


Демонстрация @codepen.io
Демонстрация @cssdesk.сom
Playground @ github pages
Проект github

Одни из первых реализаций часов на CSS, которые я нашел, когда закончил разработку своего примера:
Paul Hayes в 2009
Zoltan Hawryluk в 2010
Lennart Schoors в 2010

Ну и конечно жду комментариев и готов ответить на вопросы.

UPDATE: Перформанс примера несколько улучшен, описание выше по тексту.

UPDATE 2: Пример потихоньку расползается по интернет
и порой всплывают интересные твиты, например воттакой:

Николай Рассадин @rassadin
карма
60,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (73)

  • 0
    У вас секундная стрелка не симметрична (Safari). Когда 0 или 15/30/45 секунд очень заметно.
    • +2
      Да, я посморел сейчас под макосью. Тот пример, что на github.com лежит — загружается в немного кривом состоянии.
      Если пощелкать немного приходит в нормальное. Попробую понять как поправить.
  • +38
    Ага… и горизонт завален. А вообще я охренел от этого примера! Это крутотень!!!
    • +1
      Это бесподобно! Перед тем, как прочел статью, сразу посмотрел пример. И первый вопрос возник: Как в css определить текущее время!? Конечно же, пара строчек javascript это не кошерно, но сервером генерить css-ку — это, как мне кажется, еще более не кошерно. Зато в заголовке можно смело указывать «без javascript». Видимо, причина не использовать JS таится только в красоте заголовка.
      • +1
        Ничего подобного.
        Есть какие то правила которые устанавливаешь для себя и потом их придерживаешься. Вот и все.

        Та же история например с логотипом CSS3. Захотелось вставить на страницу, но поскольку установил для себя не использовать графику, пришлось реализовать средствами CSS
        • –1
          Да хоть ascii-артом, вопрос в том. Имеет ли это смысл с точки зрения пользователя, не учитывая личных пунктиков разработчика?

          «поскольку установил для себя не использовать графику» — на то были причины, или опять таки, личное?
  • +4
    Так неплохо, если не обращать внимания, что один процессор съедается на 100% :-)
    • +1
      Сафари, МакОС, не вижу никакой новой нагрузки на процессор при открытии примера.
      • +1
        Win 7 Pro x64 один проц забивается процентов под 80-90.
        • 0
          Win 7 HB x64 — 30-40, браузер Google Chrome.
          • +1
            OS X, Chrome, 6-8% (google chrome renderer)
        • 0
          ubuntu 12 64, firefox — 80% загрузки на процессоре
          • 0
            Да, тоже в FF такая загрузка.
        • 0
          Win 8, Chrome — всего 8% и то не факт, что от часиков.
      • 0
        Сафари, МакОС, не вижу никакой новой нагрузки на процессор при открытии примера.

        Зависит от драйверов на видяху
    • 0
      С сервера открываете? Или все же ядро?
    • 0
      Ubuntu, голый chromium. Одно ядро на 69%
  • +1
    У меня куллер на повышеных оборотах закрутился после открытия вкладки. А пример Очень крутой.
  • +2
    Не знаю почему, но в Опере стрелки постепенно съезжают. Особенно заметно в демонстрации на cssdesk.com. Наверное, ещё один баг.

    И зря не сделали безпрефиксные варианты. Префиксы уже отбрасываются, и с только ними скоро уже не будет работать. Также безпрефиксный вариант надо писать в конце, во избежание багов.
  • +2
    Ipad3 chrome.
    При попытке проскролить часы замирают.
    Практически — не применимо, академически — просто офигенно.
    • +2
      Практически все доводиться до ума при возможности и необходимости :)
    • +3
      При попытке проскроллить в АйОсе замирают процессы отрисовки, недавно на «Хабре» статья была хорошая про тормоза «Андроида», там это разбиралось. Это by design.
    • 0
      Я несколько «оптимизировал» пример.
      У меня в эмуляторе теперь процессор не загружается на все 100%.
      Думаю и у вас должно быть хорошо.
  • +3
    Охренеть. Больше слов нет. Да, баги есть, но это всё равно очень круто. Спасибо вам.
  • +17
    Да, как живые, даже лучше — на моих секундной стрелки нет =) img-fotki.yandex.ru/get/4122/59225420.3/0_ac398_b82b16a6_XL.jpeg.jpg
    • +2
      И Ваши отстают на час =)
      А так аж мурашки от сходства. От осознания что со времен ACID1 браузеры научились куче разных штук.
  • +19
    (риторический вопрос) Мне одному кажется, что развитие CSS пошло куда-то не туда?

    (вопрос к автору) Сколько времени заняла у Вас разработка этих часов? Без учёта «изучения фотографий для правдоподобного хромирования». Хотя бы примерно — 2 часа, 8 часов, 20 часов, 80 часов?
    • +7
      (ответ на вопрос мне лично) Сама собственно база за полдня сделана — она достаточно простая.
      А вот с рамкой, да совместимость под разные браузеры, еще часов 20 наверное ушло. да, похоже на то.

      (попытка ответа на риторический вопрос) CSS страшно гонят Apple да Google.
      Уже можно посмотреть что ждет в будующем.
      Из хорошего — текстовые регионы и обработка корректного заполнения форм.
      Из сомнительного — шейдеры.
      Как по мне так я думаю в перспективе CSS должен впитывать в себя все типовые задачи по оформлению UI,
      которые сейчас решаются через JS. И это правильно.
    • 0
      Нет, не вам одному. С помощью языка разметки гипертекстовых документов и набора правил оформления к нему теперь можно нарисовать вот такие офигенные часы. Часы и правда классные, но не могу выкинуть из головы картинку с троллейбусом из хлеба.
  • 0
    Надолго оставлять пробовали? Рассинхрон стрелок будет, как мне кажется, из-за задержек между последовательными анимациями секундной стрелки.
  • 0
    после 5 минут созерцания, все стрелки разъехались и вывалились из циферблата)
    WinXP, Opera последняя на сегодня
    • +1
      Да, опера, звездец какой пучок багов, так что не обессудьте — все-таки это эксперимент, а не продакшн… :)
  • +5
    Очень заинтересовала деградация с IE9 до IE10
    Где в MS накосячили?
  • +3
    На все вопросы «Но зачем?» отвечайте — потому что могу.
    Автор, Вы — круты.
  • 0
    По поводу «Показываем актуальное время», мне одному кажется, что время будет не самым точным при таком подходе? Время загрузки css с вашего сайта у меня порядка пары секунд.
  • –1
    Не разобрался, а как у вас текущее время выставляется?
    • +1
      Время задается с помощью предустановленных углов поворота стрелок, автор же целый абзац на это отвел!
      Вот, смотрите: tezla.ru/rassadin/wall-clock-demo/
      • –3
        Я еще утренний чай не выпил, извиняйте.
    • +1
      Подключается внешний CSS-файл, который генерится скриптом.
      • 0
        спасибо
  • 0
    Если я правильно понял, то проблемы с округлением при отрисовке меток в 25-ом хроме уже нет. По крайней мере их располагаются они нормально.
  • +1
    Ачууметь!
    Мисье знает толк в извращениях! :)
    Но действительно не понятно почему такая нагрузка.
    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  
    
    • 0
      Странно, открыл одновременно в ie10, chrome, fx20 — не больше 5% cpu каждый браузер съел, т.е. ничего. Система win7 x64
    • 0
      Но действительно не понятно почему такая нагрузка.

      Аппаратное ускорение не включено)
  • 0
    JavaScript, но это было бы не кошерно. Поэтому установкой времени занимается серверный скрипт

    На сервере-то Гринвич :'(
    • +1
      На сервере GMT устанавливается просто потому, чтобы быть политически нейтральным :)
      А так хоть в Петропавловске Камчатском можно генерировать.

      Хотя все-таки по честному локальное время на клиенте без JS нормально не получить.
      Хотя можно конечно базу IP->Timezone прикрутить и пытаться пользователям их локальное определять.
      • 0
        Так может всё-таки поступить «не кошерно» и сделать на JavaScript? В таком случае пользователь который откроет страничку с часами увидит своё время =)
  • 0
    Ух ты, они не только офигительны, но еще и время правильно показывают!
  • 0
    Делали бы на Canvas — не знали бы проблем.
    • +4
      Пример безусловно крут и вызывает уважение. Однако мне чем дальше, тем больше кажется, что CSS3 это просто жесть. Мало того, что поддержка этого дела почти не реальна (вот вспомнит ли даже сам автор через год-другой, за что сей кусок отвечает:
      .mr {
      	width:0.5em;
      	height:0.5em;
      	background:#222;
      	margin:-1.05em 0 0 3.74em;
      	border-radius:0.25em;
      }
      ), так еще и не видел ни одного примера (пусть даже написанного гуру CSS, как в данном случае), который бы не глючил и выглядел (и вел себя) одинаково хотя бы в паре современных браузеров.
      • +1
        Тем более подход — дурацкий. Вместо нормальной ежесекундной анимации у нас стрелка анимируется всё время, но просто две анимации направляют в разные стороны. Изменений на экране не происходит, а браузер думает, что происходят
        • +1
          Вы правильно заметили проблему вызывавшую снижение производительности,
          и чтобы её обойти, я был вынужден заменил линейную анимацию на апроксимацию (см текст выше)

          Но источник проблемы не в том, что я использую linear, а в том, что «браузер думает, что происходят» (изменения).
          Фактически браузер, в отличии от отрисовки кодом в Canvas, имеет доступ к информации на предыдущем кадре, и может отслеживать и отрисовывать только изменения.

          У Flash например с этим все впорядке, у CSS анимации с этим, как мы видем, все не очень хорошо.
          А сложить два числа (две функции анимации) 60 раз в секунду, не должно вызывать таких больших проблем.

          Я последние лет пять занимался ресурсоемком сложным графическим интерфейсов, и немножко отражаю что такие вопросы по оптимизации должны решаться исключительно движком, а не накладывать ограничения на возможности.
          • 0
            Ну я так понимаю, изменения на самом деле есть, но они стремятся к нулю.

            А сложить два числа (две функции анимации) 60 раз в секунду, не должно вызывать таких больших проблем.

            Конечно, что все эти 60 раз будет складываться два разных флоата, а они, как известно имеют погрешность. Лучше вообще эти анимации не запускать, пока стрелка должна стоять на месте.

            Фактически браузер, в отличии от отрисовки кодом в Canvas, имеет доступ к информации на предыдущем кадре, и может отслеживать и отрисовывать только изменения.

            На Канвасе можно всё очень вкусно и легко заоптимизировать так, что даже на самых слабых машинах оно будет работать очень быстро.
            • 0
              Ну да есть такая особенность работы с числами в формате Floating Point. Никто не мешает движку определять является ли разница визуально различимой или нет.

              Про Канвас я знаю. Канвас штука отличная и такие часы на нем пишутся за полдня и получаются отличными и относительно безглючными. Как-нибудь на нем тоже что-нибудь обязательно напишу, но для него надо нужна свежая и интересная идея.

              Здесь задача стояла другая. Ну вы понимаете.
      • 0
        это экспериментальный код. он специально написан так как написан и делает все так скажем на грани новых технологий.

        если бы это был production код, то
        1) были бы совершенно другие требования к совместимости и искуственных ограничений
        2) что касается комментирования кода и названия идентификаторов, то был бы полный порядок
        3) он бы не глючил и выглядел одинаково, потому что не достаточно отлаженные технологии и сырая функциональность просто бы не использовалась.

    • 0
      Канва хороша, но далеко не везде поддерживает даже ретину, не говоря уже о никаком масштабировании (средствами браузера).
  • 0
    а как часовой пояс менять?=)
    • 0
      я думал сделать карту часовых поясов и выбор, но мне честно было уже лень это делать.
  • +1
    Зашел на «playground @github-pages», браузер Хром, при смене размера разъезжаются стрелки, бегают отдельно от часов.
    Т.е. пример работает только сферически и в вакууме.
    • 0
      часики более менее безглючно ходят на codepen.io.

      playground @github-pages — это эксперимент в рамках новых технологий цель которого не сделать рабочую везде версию, а оценить как с этими технологиями справляется ваш Хром (плохо). По результатам чего я сейчас как раз занимаюсь составлением баг репортов для разработчиков Webkit, Firefox и IE.
    • –2
      Asus tf300tg, Android 4.1
      image
      У меня планшет сферический в вакууме?
  • +2
    Про мое знакомство с HTML(CSS тогда еще не существовало)

    Я познакомился с HTML в 1999 году и с тех пор от случая к случаю я занимался frontend-разработкой для веб, как правило, скорее как хобби, и очень изредка, как часть какого-нибудь большого рабочего проекта.


    CSS был предложен в 1994 году, в 1996 была опубликована первая спецификация, в том же году был выпущен ie3 с поддержкой этой технологии.
    • 0
      Соглашусь с вами по датам немного неправильное заявление — поправил.
      Что касается СSS1 то можно говорить, что его нормальная его поддержка появилась только IE4.

  • 0
    Часы отлично подходят для рабочего стола веб-приложения «умного дома». На планшете, вроде, крутятся…
  • +1
    Хм… Что-то я не заметил тут логики:
    image
    Хотя… Если прищуриться и наклонить голову на pi/8 радиан, то.. не. Не катит.

    Google Chrome (Версия 25.0.1364.97 m)
    • 0
      А если включить «CSS3 Syntax», то часы вообще встают на 12 ночи (или утра) ровно
      • 0
        Хотя очень впечатлило… Но только как фан (ибо на реальных проектах это использовать глупо и не рационально)
        • 0
          «нерационально», конечно же
  • 0
    По поводу векторизации — "Vector Magic" не пробовали?
    Например, те же цифры из часов (онлайн-версия, без ручной правки).

    Руками, разумеется, аккуратнее получится.
  • –1
    Так, отлично. Реально симпатичные.
    А можно ваши часики на рабочий стол в Windows поставить?
    А на заставку?
    А виджетом на андроид?
    • 0
      1) Известными мне способами — нет;
      2) Читайте HTML виджеты для Windows 8;
      3) Читайте HTML виджеты для android.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.