Поиск по этому блогу

понедельник, 28 января 2013 г.

Виджет часов на JS + CSS 3. Часть 1

Подумать, только, как летит время и все меняется вокруг? Не так давно для реализации более-менее "симпатичных" часиков необходимо было прибегать к использованию спрайтов, а для часов с круглым циферблатом казалось проще и вовсе использовать Flash, а не "мощь" CSS и JS. Давайте проверим насколько трудно сейчас реализовать подобный виджет.

Начнем, пожалуй, с самих часов, их внешнего вида.
Будущий вид нашего виджета.
Начнем с каркаса и будем двигаться от простого к сложному.
.clock {
 position: relative; /* Set position anchor for other clock elements */
 border-radius: 50%; /* Make it round */
 /* Decorations */
 display: inline-block;
 width: 200px;
 height: 200px;
 margin: 20px;
 background: #000;
 background: rgba(0,0,0,0.8);
 border: 5px solid silver;
 box-shadow: inset 0 0 3px 0 #fff, 0 0 3px 0 #000;
}
<div class="clock"></div>
Солнечный круг, небо вокруг
Это рисунок мальчишки
Нарисовал он на листке
И подписал в уголке
...
Гм... в общем мы нарисовали наш "главный" елемент, который и послужит основой для наших часов. Добавим стрелки на наш циферблат.
.clock .clock-hour, .clock .clock-minute, .clock .clock-second {
 /* --- Position left bottom corner into the center of clock */
 position: absolute;
 left: 50%;
 bottom:50%;
 /* --- */

 /* --- Position left center into the center of clock */
 width: 5px;
 margin-left: -2.5px;
 /* --- */

 height: 35%;
 border-radius: 2px;
 background: orange;

 /* --- Set transformation anchor */
 -webkit-transform-origin: bottom center;
 -moz-transform-origin: bottom center;
 -ms-transform-origin: bottom center;
 -o-transform-origin: bottom center;
 transform-origin: bottom center;
 /* --- */

 /* --- Some initial rotates (we will remove it later ) */
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
 /* --- */
}
.clock .clock-hour {
 width: 7px;
 margin-left: -3.5px;
 height: 20%;
 background: green;

 -webkit-transform: rotate(80deg);
 -moz-transform: rotate(80deg);
 -ms-transform: rotate(80deg);
 -o-transform: rotate(80deg);
 transform: rotate(80deg);
}
.clock .clock-second {
 width: 2px;
 margin-left: -1px;
 height: 40%;
 background: maroon;

 -webkit-transform: rotate(300deg);
 -moz-transform: rotate(300deg);
 -ms-transform: rotate(300deg);
 -o-transform: rotate(300deg);
 transform: rotate(300deg);
}
<div class="clock">
 <div class="clock-hour"></div>
 <div class="clock-minute"></div>
 <div class="clock-second"></div>
</div>
Итак мы нарисовали 3 палочки (красную, зеленую и оранжевую), задали при помощи transform-origin точку в которой будет прикладываться трансформация (в нашем случае мы будем поворачивать елементы относительно нее). Так как мы расположили елементы (стрелочки) таким образом что бы центр их нижней стороны приходился на центр циферблата, то и елементы будут поворачиваться относительно центра циферблата. При помощи transform: rotate(); мы задали начальные повороты для стрелочек и после добавления "динамики" к нашим часам мы сможем убрать их из нашего CSS.
Теперь же добавим цифры нанаш циферблат.
.clock span {
 position: absolute;
 font: 16px/18px bold "Segoe UI", "Lucida Grande", "Trebuchet MS";
 color: #fff;
 height: 45%;
 left: 50%;
 bottom:50%;
 width: 2em;
 margin-left: -1em;
 text-align: center;
 -webkit-transform-origin: bottom center;
 -moz-transform-origin: bottom center;
 -ms-transform-origin: bottom center;
 -o-transform-origin: bottom center;
 transform-origin: bottom center;

 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
}
/* Add rotates for each number */
.clock > span + span {-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);}
.clock > span + span + span {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
.clock > span + span + span + span {-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);}
.clock > span + span + span + span + span {-webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg);}
.clock > span + span + span + span + span + span {-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.clock > span + span + span + span + span + span + span {-webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -ms-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg);}
.clock > span + span + span + span + span + span + span + span {-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);}
.clock > span + span + span + span + span + span + span + span + span {-webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg);}
.clock > span + span + span + span + span + span + span + span + span + span {-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);}
.clock > span + span + span + span + span + span + span + span + span + span + span {-webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -ms-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg);}
.clock > span + span + span + span + span + span + span + span + span + span + span + span {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}
<div class="clock">
 <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> <span>11</span> <span>12</span> 
 <div class="number"></div>
 <div class="clock-hour"></div>
 <div class="clock-minute"></div>
 <div class="clock-second"></div>
</div>
Точно так же как и струлочки мы разместили цифры на циферблате и задали им свои повороты. Соеденив приведенный CSS вы должны увидеть наши часы, но чегото не хватает... Неплохо бы прикрыть место стыка стрелочек что б часики выглядели немного симпатичнее.
.clock .clock-center{
 position: absolute;
 top:50%;
 left:50%;
 width: 20px;
 height: 20px;
 margin: -10px 0 0 -10px;
 background-color: silver;
 border-radius: 50%;
 z-index:2;
}
<div class="clock">
 <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>10</span> <span>11</span> <span>12</span> 
 <div class="number"></div>
 <div class="clock-hour"></div>
 <div class="clock-minute"></div>
 <div class="clock-second"></div>
 <div class="center"></div>
</div>
Ну что ж наши часы готовы и в следуйщей статье мы заставим их "ходить".

Комментариев нет:

Отправить комментарий