RU
 
  • Work
  • Store
  • Studio
  • Contact us
  • Ironov
  • Competencies
  • Fokus
    •

    		Technogrette



    HTML and CSS   XSLT   JavaScript   Images   Soft   Etc  
    Denis Khripkov

    CSS3 clock with no JavaScript February 2, 2012

    Safari 4+, Firefox 6+ or Chrome 13+ required to view this example.

    Task:

    to create a clock without using images or JavaScript.

    The initial hand position is set in a dynamic CSS which is generated by a server script written in PHP (1,57 KB) or Parser Parser (1,34 KB). The correct prefix for @keyframes is determined by HTTP_USER_AGENT.

    The clock shows Moscow time (UTC+4). Local time can be shown based on user profile settings or by quering an IP database.

    Dynamic CSS:

    01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
    /* UTC+4 time 05:15:04 */
/* Browser prefix: -webkit- */

.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2)
{
    -webkit-animation-name: arr1;
}
@-webkit-keyframes arr1 {
    from { -webkit-transform: rotate(158deg)}
    to { -webkit-transform: rotate(518deg)}
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4)
{
    -webkit-animation-name: arr2;
}
@-webkit-keyframes arr2 {
    from { -webkit-transform: rotate(90deg)}
    to { -webkit-transform: rotate(450deg)}
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7)
{
    -webkit-animation-name: arr3;
}
@-webkit-keyframes arr3 {
    from { -webkit-transform: rotate(24deg)}
    to { -webkit-transform: rotate(384deg)}
}

    Static CSS and HTML:

    01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 
91 
92 
93 
94 
95 
96 
97 
98 
99 
100 
101 
102 
103 
104 
105 
106 
107 
108 
109 
110 
111 
112 
113 
114 
115 
116 
117 
118 
119 
120 
121 
122 
123 
124 
125 
126 
127 
128 
129 
130 
131 
132 
133 
134 
135 
136 
137 
138 
139 
140 
141 
142 
143 
144 
145 
146 
147 
148 
149 
150 
151 
152 
153 
154 
155 
156 
157 
158 
159 
160 
161 
162 
163 
164 
165 
166 
167 
168 
169 
170 
171 
172 
173 
174 
175 
176 
177 
178 
179 
180 
181 
182 
183 
184 
185 
186 
187 
188 
189 
190 
191 
192 
193 
194 
195 
196 
197 
198 
199 
200 
201 
202 
203 
204 
205 
206 
207 
208 
209 
210 
211 
212 
213 
214 
215 
216 
217 
218 
219 
220 
221 
222 
223 
224 
225 
226 
227 
228 
229 
230 
231 
232 
233 
234 
235 
236 
237 
238 
239 
240 
241 
242 
243 
244 
245 
246 
247 
248 
249 
250 
251 
252 
253 
254 
255 
256 
257 
258 
259 
260 
261 
262 
263 
264 
265 
266 
267 
268 
269 
270 
271 
272 
273 
274 
275 
276 
277 
278 
279 
280 
281 
282 
283 
284 
285 
286 
287 
288 
289 
290 
291 
292 
293 
294 
295 
296 
297 
298 
299 
300 
301 
302 
303 
304 
305 
306 
307 
308 
309 
310 
311 
312 
313 
314 
315 
316 
    /* global */
.myClockJS {
    margin: 6em;
}
.myClockJS b {
    display: block;
    width: 100%;
    font-weight: normal;
}
.myClockJS .inner {
    margin: 0 auto;
    position: relative;
}
/* dial clock */
.myClockJS .dial.inner {
    width: 251px;
    height: 251px;
}
.myClockJS .dial .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.myClockJS .dial .shadow-out {
    margin: -9% 0 0 -9%;
    padding: 9%;
    -webkit-box-shadow: 0px 10px 30px #747788;
    -moz-box-shadow: 0px 10px 30px #747788;
    -ms-box-shadow: 0px 10px 30px #747788;
    -o-box-shadow: 0px 10px 30px #747788;
    box-shadow: 0px 10px 30px #747788;
    background: #fff;
    background: -webkit-linear-gradient(-90deg, #fff, #eaebed);
    background: -moz-linear-gradient(-90deg, #fff, #eaebed);
    background: -ms-linear-gradient(-90deg, #fff, #eaebed);
    background: -o-linear-gradient(-90deg, #fff, #eaebed);
    background: linear-gradient(-90deg, #fff, #eaebed);
}
.myClockJS .dial .shadow-in {
    margin: -4% 0 0 -4%;
    padding: 4%;
    -webkit-box-shadow: 0px 3px 10px #747788 inset;
    -moz-box-shadow: 0px 3px 10px #747788 inset;
    -ms-box-shadow: 0px 3px 10px #747788 inset;
    -o-box-shadow: 0px 3px 10px #747788 inset;
    box-shadow: 0px 3px 10px #747788 inset;
    background: #fff;
    background: -webkit-linear-gradient(-90deg, #fff, #dce1e7);
    background: -moz-linear-gradient(-90deg, #fff, #dce1e7);
    background: -ms-linear-gradient(-90deg, #fff, #dce1e7);
    background: -o-linear-gradient(-90deg, #fff, #dce1e7);
    background: linear-gradient(-90deg, #fff, #dce1e7);
}
/* segments */
.myClockJS .dial .seg b {
    position: absolute;
    width: 1%;
    height: 100%;
    min-width: 1px;
    left: 50%;
    margin-left: -0.4%;
}
.myClockJS .dial .seg b b:after
, .myClockJS .dial .seg b b:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3%;
    background-color: #aaa;
}
/* hours */
.myClockJS .dial .seg>b>b:before
, .myClockJS .dial .seg>b>b:after {
    height: 6%;
    width: 250%;
}
.myClockJS .dial .seg b:before {
    bottom: 0;
}
/* setup all 60 segments */
.myClockJS .dial .seg>b:last-child{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.myClockJS .dial .seg>b>b:nth-child(2){
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
.myClockJS .dial .seg>b>b:last-child{
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}
.myClockJS .dial .seg>b>b b{
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
}
.myClockJS .dial .seg>b>b>b:last-child{
    -webkit-transform: rotate(18deg);
    -moz-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    -o-transform: rotate(18deg);
    transform: rotate(18deg);
}
/* arrows with clones, for shadow */
.myClockJS .dial .arr b {
    position: absolute;
    height: 100%;
    left: 50%;
    min-width: 1px;
}
.myClockJS .dial .arr b:after {
    position: absolute;
    width: 100%;
    content: '';
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2) {
    width: 4.5%;
    margin-left: -2.2%;
}
.myClockJS .dial .arr b:nth-child(1):after
, .myClockJS .dial .arr b:nth-child(2):after {
    height: 25%;
    top: 25%;
    background-color: #000;
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4) {
    width: 3%;
    margin-left: -1.4%;
}
.myClockJS .dial .arr b:nth-child(3):after
, .myClockJS .dial .arr b:nth-child(4):after {
    height: 37%;
    top: 13%;
    background-color: #000;
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7) {
    width: 1%;
    min-width: 1px;
    margin-left: -0.3%;
}
.myClockJS .dial .arr b:nth-child(5):after
, .myClockJS .dial .arr b:nth-child(7):after {
    height: 67%;
    background-color: #d70000;
}
.myClockJS .dial .arr b:nth-child(6)
, .myClockJS .dial .arr b:nth-child(8) {
    width: 8%;
    margin-left: -3.9%;
}
.myClockJS .dial .arr b:nth-child(6):after
, .myClockJS .dial .arr b:nth-child(8):after {
    height: 8%;
    top: 46%;
    background-color: #d70000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.myClockJS .dial .arr b:nth-child(1):after
, .myClockJS .dial .arr b:nth-child(3):after
, .myClockJS .dial .arr b:nth-child(5):after
, .myClockJS .dial .arr b:nth-child(6):after {
    background-color: #000;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    -ms-box-shadow: 0 0 5px #000;
    -o-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    opacity: 0.2;
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(3) {
    margin-top: 1.5%;
}
.myClockJS .dial .arr b:nth-child(6)
, .myClockJS .dial .arr b:nth-child(5) {
    margin-top: 2%;
}
.myClockJS .dial .arr b {
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2) {
    -webkit-animation-duration: 43200s;
    -moz-animation-duration: 43200s;
    -ms-animation-duration: 43200s;
    -o-animation-duration: 43200s;
    animation-duration: 43200s;
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4) {
    -webkit-animation-duration: 3600s;
    -moz-animation-duration: 3600s;
    -ms-animation-duration: 3600s;
    -o-animation-duration: 3600s;
    animation-duration: 3600s;
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7) {
    -webkit-animation-duration: 60s;
    -moz-animation-duration: 60s;
    -ms-animation-duration: 60s;
    -o-animation-duration: 60s;
    animation-duration: 60s;
}

<div class="myClockJS">
    <div class="inner dial">
        <b class="shadow shadow-out"></b>
        <b class="shadow shadow-in"></b>
        <div class="seg">
            <b>

                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>

                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>

                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>

            </b>
            <b>

                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>

                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>

                <b>
                    <b>
                        <b></b>
                    </b>
                    <b>
                        <b></b>
                    </b>
                </b>

            </b>
        </div>
        <b class="arr">
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
            <b></b>
        </b>
    </div>
</div>

    © 1995–2020 Art. Lebedev Studio
    511 Avenue of the Americas, New York, USA, NY 10011
    mailbox@artlebedev.com
    Order a design...