Создаем стрелочные часы при помощи CSS3 | RUDEBOXСоздатели своих веб-ресурсов часто любят устанавливать такие гаджеты как часы, честно я не понимаю смысл в этом, ведь я всегда посмотрю время на часы на руке или на ноуте, но все же такой урок имеет место быть, ведь на каждый товар есть свой покупатель. В данном уроке мы рассмотрим как создать замечательные на вид, на мой взгляд, стрелочные часы. Следует отметить, что данные часы являются экспериментом, и могут не поддерживаться некоторыми браузерами включая ранние версии старого ослика, и так, давайте приступим.

Ключевой особенностью является то, что часы учитывают часовой пояс установлен у Вас на компьютере, а как вы знаете, некоторые используют виджеты в которых уже зафиксирован часовой пояс для определенной страны, то есть получается что я, житель Украины, захожу на русский сайт, и мне отображается русское время, а не украинское. С этими часами все иначе.

Шаг 1. HTML

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

Кроме этого мы добавляем классы со стрелками, как Вы уже поняли, для аналоговых часов у нас будет три стрелки.

Создаем стрелочные часы при помощи CSS3 | RUDEBOX

Шаг 2. CSS

Нам необходимо определить общие параметры контейнера, кроме этого нам необходимо создать стиль самых часов, для этого мы будем использовать градиентную заливку и тени для эффекта объемности часов. Параметры border-radius позволит нам скруглить углы, установив значение 50% мы получим круг, что и необходимо нам для подложки для часов.

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

Шаг 3. JS

Здесь все интереснее, кроме того, что нам необходимо считать временной диапазон для часов, ну и установить ход для всех стрелок часов.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: