Buat dan Pasang Digital Clock dg Efek CSS3

Dengan memanfaatkan beberapa properti CSS3 kita akan membuat sebuah jam digital yang dapat berpindah tempat secara animatif ketika tersentuh cursor. Jam digital ini juga tanpa satupun background image. Semua mengandalkan kemampuan kode CSS3. Background gradient memberi sentuhan warna gradient seperti layaknya background image, sedang css3 transition, css3 transition delay, css3 transform, opacity effect memberi efek animatif yang sangat cantik. Desain yang kita buat ini sedikit berbeda dengan yang terlihat di bagian header blog ini (lihat digital clock yang ada di header dan arahkan cursor di atas header blog). Ada satu efek transformasi dengan delay disertai rotate effect untuk membuat pergerakan digital clock agar lebih atraktif.

Tutorial ini hanya akan menyertakan kode CSS yang telah dlengkapi dengan css3. Anda dapat mengcopy script dan xHTMLnya serta membaca tutorial cara menggunakannya melalui link di bawah ini.

Pasang Jam Digital di Header Blogger

Kode CSS digital Clock dg Efek CSS3

.header-inner{position:relative;}
.header-inner .PIOdigit{
      position:absolute;
      top:50%; /* code by: shannenpio */
      right:3%;
      float:left;
      padding:5px;
      border:4px solid #666;
      background:#333;
      z-index:99;
      opacity:0.6;
      filter:alpha(opacity=60);
      transition:top 1s, right 1s 1s, opacity 2s;
      -o-transition:top 1s, right 1s 1s, opacity 2s;
      -moz-transition:top 1s, right 1s 1s, opacity 2s;
      -webkit-transition:top 1s, right 1s 1s, opacity 2s;
      -ms-transition:top 1s, right 1s 1s, opacity 2s;
      transform:scale(0.8);
      -o-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -ms-transform:scale(0.8);
}
.header-inner:hover .PIOdigit{
      opacity:1.0;
      filter:alpha(opacity=100);
      top:10%;
      right:60%; 
}
.header-inner .PIOdigit .PIOdigi{
      font-family:MS Sans serif;
      font-size:28px;
      color:#00FFFF;
      font-weight:bolder;
      border:2px dotted red;
      padding:5px 0;
      display:block;
      float:right;
      text-align:center;
      width:125px;
      background: #003fa6;
      background:-moz-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#003fa6),color-stop(6%,#0454c5),color-stop(32%,#08327c),color-stop(53%,#021035),color-stop(76%,#021035),color-stop(96%,#043b72));
      background:-webkit-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      background:-o-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      background:-ms-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      background:linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003fa6',endColorstr='#043b72',GradientType=0); 
      text-shadow:2px 2px 2px #000;
      box-shadow:0 0 5px #000;
      transition:0.3s 1s;
      -o-transition:0.3s 1s;
      -moz-transition:0.3s 1s;
      -webkit-transition:0.3s 1s;
      -ms-transition:0.3s 1s;
      transform:scale(1.0) rotate(-360deg);
      -o-transform:scale(1.0) rotate(-360deg);
      -moz-transform:scale(1.0) rotate(-360deg);
      -webkit-transform:scale(1.0) rotate(-360deg);
      -ms-transform:scale(1.0) rotate(-360deg);
}
.header-inner:hover .PIOdigit .PIOdigi{
      transform:scale(2.0) rotate(720deg);
      -o-transform:scale(2.0) rotate(720deg);
      -moz-transform:scale(2.0) rotate(720deg);
      -webkit-transform:scale(2.0) rotate(720deg);
 ms-transform:scale(2.0) rotate(720deg);
}

Catatan/Keterangan:

1. Dalam tutorial yang di shannenpio telah disertakan kode css untuk digital clock. Ganti kode css tersebut dengan kode css di atas.
2. Pengaturan posisi jam digital dapat diatur dengan merubah nilai top dan right yang terdapat pada syntax .header-inner .PIOdigit (nilai dalam %).
3. Untuk mengatur posisi jam digital saat tersentuh cursor (hover effect), rubah nilai pada top dan right pada syntax .header-inner:hover .PIOdigit.
4. Efek transparansi di atur dengan merubah nilai opacity.