Home » CSS 3 » Membuat Stopwatch dengan CSS 3

Membuat Stopwatch dengan CSS 3

Posted by Hero Posted on 11:49 PM with 45 comments

cara membuat stopwatch, tutorial membuat stopwatch

Sekarang ini hanya dengan menggunakan CSS kita sudah bisa membuat beragam animasi dasar yang bisa menggantikan dokumen lain seperti gambar, flash ataupun Javascript.

Dalam tutorial kali ini saya akan membuat Stopwatch dengan menggunakan CSS3.

Hal-hal yang perlu kita persiapkan untuk pembuatan Stopwatch :: Segelas kopi hangat Disamping ^__^ Justkidding.

Petama buat file phpnya, ikuti source code dibawah ini ::

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>
<div class="container">
 <!-- time to add the controls -->
 <input id="start" name="controls" type="radio" />
 <input id="stop" name="controls" type="radio" />
 <input id="reset" name="controls" type="radio" />
 <div class="timer">
  <div class="cell">
   <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
  </div>
  <div class="cell">
   <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
  </div>
  <div class="cell">
   <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell divider"><div class="numbers">:</div></div>
  <div class="cell">
   <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="cell">
   <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  </div>
 </div>
 <!-- Lables for the controls -->
 <div id="timer_controls">
  <label for="start">Start</label>
  <label for="stop">Stop</label>
  <label for="reset">Reset</label>
 </div>
</div>
</body>
</html>

Selanjutnya tahap kedua kita membuat file css ::

 
* {margin: 0; padding: 0;}

body{
 background: #96ef9a; repeat;
}

.container {
 padding: 200px;
 text-align: center;
}

.timer {
 padding: 10px;
 background: linear-gradient(top, #222, #444);
 overflow: hidden;
 display: inline-block;
 border: 7px solid #efefef;
 border-radius: 5px;
 position: relative;
 
 box-shadow: 
  inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 
  0 5px 20px -10px rgba(0, 0, 0, 1);
}

.cell {
 width: 0.60em;
 height: 40px;
 font-size: 50px;
 overflow: hidden;
 position: relative;
 float: left;
}

.numbers {
 width: 0.6em;
 line-height: 40px;
 font-family: digital, arial, verdana;
 text-align: center;
 color: #fff;
 
 position: absolute;
 top: 0;
 left: 0;
 
 text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

#timer_controls {
 margin-top: -5px;
}
#timer_controls label {
 cursor: pointer;
 padding: 5px 10px;
 background: #efefef;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}

.moveten {
 animation: moveten 1s steps(10, end) infinite;
 animation-play-state: paused;
}
.movesix {
 animation: movesix 1s steps(6, end) infinite;
 animation-play-state: paused;
}

.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;}

.milisecond {animation-duration: 1s;}
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}

.minute {animation-duration: 600s;}
.tenminute {animation-duration: 3600s;}

.hour {animation-duration: 36000s;}
.tenhour {animation-duration: 360000s;} 

@keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 
}

@keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 
}



@font-face {
 font-family: 'digital';
 src: url('DS-DIGI.TTF');
 
}

yang terakhir kalian harus Download fontsnya untuk downloadnya bisa klik disini.

Selesai, kalian tinggal save dan jalankan dikomputer.
Sekian dulu tutorial dari saya.

Salam Hangat

Roy Purbo