Челендж в Сиджеке.
В ФонтОсоме и Бутстрапе говно — http://fontawesome.io/icon/clock-o/
Нужно не говно: стрелки показывают то время, которое они изображают. Статично, не двигаются, ничего. Стоят на нужном времени. Ещё раз: двигаться ничего не должно.
- Круг циферблата.
- Четыре (3, 6 и 9 и 12 часов) или, в крайнем случае, 12 часовых отметок.
- Часовая стрелка: потолще и покороче.
- Минутная стрелка: потоньше и подлиннее (ну ты понел).
- Часы и минуты задаются либо дата-атрибутами, либо инлайн-стилями (чтобы можно было вывести иконку бекендом). Я не знаю возможностей современного CSS, поэтому тут на выбор. Идеал — дата-атрибуты.
- Размер иконки должен автоматически наследоваться от
font-size
родительского элемента. Как это сделано во всех наборах векторных (шрифтовых) иконок. - Автоматическое наследование цвета иконки от цвета текста родительского элемента. Аналогично.
- Поворот часовой стрелки:
(hours % 12) * 30 + mins * 0.5
. - Поворот минутной стрелки:
mins * 6
.
Формулы даны с отсчётом от вертикального положения по часовой стрелке. Если в CSS нужно отсчитывать от горизонтального положения, сделать действия самостоятельно.
Пример статичного положения: http://sijeko.ru/temp/clock.html
Скорее всего, сделать на чистом CSS вычисление углов из дата-атрибутов не получится (или получится?).
Можно написать небольшой яваскрипт, который повернёт стрелки на нужные углы, а по умолчанию (яваскрипт не подключён) поставить стрелки, например, на 3:00
, 9:00
или 10:10
(как в рекламе).
<time datetime="2015-07-15T16:48:00+03:00">
<span class="clock">
<span class="hour-arr" data-hours="16" />
<span class="min-arr" data-mins="48" />
</span>
<span class="datetime-text">16:48</span>
</time>
Вариант решения с серверным скриптом, выводящим SVG-картинку:
https://sijeko.ru/temp/clock-icon/