Автор

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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 1. HTML

 

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

<div class="support"></div>
<div class="clock">
<div class="numbers">
<ul>
	<li>12</li>
	<li>3</li>
	<li>6</li>
	<li>9</li>
</ul>
</div>
<div class="clockwise"></div>
</div>

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

 

Шаг 2. CSS

 

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

*, *:before, *:after {
 box-sizing: border-box;
}
html {
 height:100%;
}
body {
 background: radial-gradient(center center, circle cover, #c9c2b6, #7a726f);
 background: -moz-radial-gradient(center center, circle cover, #c9c2b6 0%, #7a726f 100%);
 background: -webkit-radial-gradient(center center, circle cover, #c9c2b6 0%, #7a726f 100%);
 font-family: Arial, helvetica, 'sans';
}
.clock {
 width:193px;
 height:193px;
 border-radius:80%;
 margin:auto;
 position:absolute;
 top:0; right:0; bottom:0; left:0;
 background:#f0f1e9;
 box-shadow: 0 10px 20px rgba(0,0,0,0.2), inset 0 3px 0 rgba(255,255,255,0.5), inset 0 -4px 0 rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.2);
 /* background: linear-gradient(top, #f0f1e9, #f0f1e9 100%);*/
}
.clock::before {
 content:'';
 width:130px;
 height:130px;
 position:absolute;
 margin:auto;
 top:0; right:0; bottom:0; left:0;
 border-radius:50%;
 background: -webkit-linear-gradient(top, #e9eae2, #f5f5ec 100%);
 background: -moz-linear-gradient(top, #e9eae2, #f5f5ec 100%);
 background: linear-gradient(top, #e9eae2, #f5f5ec 100%);
}
.numbers, clockwise {
 width:100%;
 height:100%;
 border-radius:50%;
}
.numbers ul {
 list-style:none;
}
.numbers ul li {
 position:absolute;
 width:1.5em;
 height:1.5em;
 text-align:center;
 line-height:1.5em;
 font-size:1.3em;
 color:#a5a595;
}
.numbers ul li:first-child {
 top:0;
 left:50%;
 margin-left:-0.75em;
}
.numbers ul li:nth-child(2){
 top:50%;
 right:0;
 margin-top:-0.75em;
}
.numbers ul li:nth-child(3){
 left:50%;
 bottom:0;
 margin-left:-0.75em;
}
.numbers ul li:last-child{
 top:50%;
 left:0;
 margin-top:-0.75em;
}
.clockwise .center, .support {
 position:absolute;
 width:10px;
 height:10px;
 border-radius:50%;
 background: radial-gradient(center center, circle , #ffffff, #837874 97%, #b4b2aa 100%);
 background: -moz-radial-gradient(center center, circle,#ffffff, #837874 97%, #b4b2aa 100%);
 background: -webkit-radial-gradient(center center, circle , #ffffff, #837874 97%, #b4b2aa 100%);
 background-position:50% -12px;
 box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
.clockwise .center {
 left:50%; margin-left:-5px;
 top:50%; margin-top:-5px;
 z-index:5;
}
.support {
 margin:auto;
 top:-260px; right:0; bottom:0; left:0;
 box-shadow: 0 5px 5px rgba(0,0,0,0.4), 0 -1px 2px rgba(0,0,0,0.3);
}
.support::before {
 content:'';
 width:4px;
 height:100px;
 background:#fff;
 position:absolute;
 z-index:-1;
 transform:rotate(38deg);
 transform-origin:50% 0%;
 top:5px;
 left:3px;
 background: linear-gradient(left, #f3f3f3, #fff);
 box-shadow: 4px 3px 3px rgba(0,0,0,0.2), inset 1px 0 4px rgba(0,0,0,0.2);
}
.support::after {
 content:'';
 width:4px;
 height:100px;
 background:#fff;
 position:absolute;
 z-index:-1;
 transform:rotate(-38deg);
 transform-origin:50% 0%;
 top:5px;
 left:1px;
 background: linear-gradient(left, #f3f3f3, #fff);
 box-shadow: -2px 3px 3px rgba(0,0,0,0.2), inset 1px 0 4px rgba(0,0,0,0.2);
}
[class*="hand-"] {
 border-radius: 100% 100% 5px 5px;
 box-shadow: 0 0 0.5em rgba(black,0.2);
 left: 50%;
 position: absolute;
 top: 50%;
 z-index: 4;
 box-shadow:0 5px 5px rgba(0,0,0,0.3);
}
.hand-second {
 width: 2px;
 top: 18px;
 height: 78px;
 background:#f16e54;
 transform-origin: 50% 100%;
}
.hand-minute {
 width: 6px;
 top:26px;
 margin-left:-3px;
 height: 88px;
 background:#68645b;
 transform-origin: 50% 80%;
}
.hand-hour {
 width: 6px;
 top: 56px;
 transform-origin: 50% 40px;
 margin-left:-3px;
 height: 50px;
 background:#68645b;
}

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

 

Шаг 3. JS

 

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

var oClockAnalog = {
 aSecond: [],
 dtDate: new Date(),
 iCurrSecond: -1,
 iHourRotation: -1,
 iMinuteRotation: -1,
 iStepSize: 10,
 iTimerAnimate: setInterval("oClockAnalog.fAnimate()", 20),
 iTimerUpdate: setInterval("oClockAnalog.fUpdate()", 1000),
fAnimate: function() {
 if (this.aSecond.length > 0) {
 this.fRotate("analogsecond", this.aSecond[0]);
 this.aSecond = this.aSecond.slice(1);
 }
 },
 fGetHour: function() {
 var iHours = this.dtDate.getHours();
 if (iHours > 11) {
 iHours -= 12;
 }
 return Math.round((this.dtDate.getHours() * 30) + (this.dtDate.getMinutes() / 2) + (this.dtDate.getSeconds() / 120));
 },
 fGetMinute: function() {
 return Math.round((this.dtDate.getMinutes() * 6) + (this.dtDate.getSeconds() / 10));
 },
 fInit: function() {
 this.iHourRotation = this.fGetHour();
 this.fRotate("analoghour", this.iHourRotation);
this.iMinuteRotation = this.fGetMinute();
 this.fRotate("analogminute", this.iMinuteRotation);
this.iCurrSecond = this.dtDate.getSeconds();
 this.fRotate("analogsecond", (6 * this.iCurrSecond));
 },
 fRotate: function(sID, iDeg) {
 var sCSS = ("rotate(" + iDeg + "deg)");
 $("#" + sID).css({ '-moz-transform': sCSS, '-o-transform': sCSS, '-webkit-transform': sCSS });
 },
 fStepSize: function(iTo, iFrom) {
 var iAnimDiff = (iFrom - iTo);
 if (iAnimDiff > 0) {
 iAnimDiff -= 360;
 }
 return iAnimDiff / this.iStepSize;
 },
 fUpdate: function() {
 // update time
 this.dtDate = new Date();
// hours
 var iTemp = this.fGetHour();
 if (this.iHourRotation != iTemp) {
 this.iHourRotation = iTemp;
 this.fRotate("analoghour", iTemp);
 }
// minutes
 iTemp = this.fGetMinute();
 if (this.iMinuteRotation != iTemp) {
 this.iMinuteRotation = iTemp;
 this.fRotate("analogminute", iTemp);
 }
// seconds
 if (this.iCurrSecond != this.dtDate.getSeconds()) {
 var iRotateFrom = (6 * this.iCurrSecond);
 this.iCurrSecond = this.dtDate.getSeconds();
 var iRotateTo = (6 * this.iCurrSecond);
// push steps into array
 var iDiff = this.fStepSize(iRotateTo, iRotateFrom);
 for (var i = 0; i < this.iStepSize; i++) {
 iRotateFrom -= iDiff;
 this.aSecond.push(Math.round(iRotateFrom));
 }
 }
 }
}; ClockInit();

 

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

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

Создаем адаптивный слайдер товаров с помощью плагина анимации Sequence.js. В статье подробно описываются все нюансы инструмента и какие параметры используются в слайдере. Хороший вариант презентации своих продуктов.


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

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


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

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.


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

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close