agung wisudhatama September 10, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

JAM Analog di jaman sekarang sudah jarang dipakai. Terlebih lagi dengan kehadiran jam yang sudah terpasang di HP Android yang semakin canggih dan simpel. Tidak membutuhkan ruang atau space yang lebar. Cukup dengan alat digital HP, jam sudah terpasang dengan estetis.

Jam analog dengan dimensi yang besar memiliki nilai estetik yang tinggi. Keren dan bernuansa jaman old kata beberapa orang. Lihat saja tampilan jam pada tahun 80'an dan 90'an bentuknya besar dan malah ada yang menyerupai lemari pakaian. Justru keunikan itu membuat daya tarik tersendiri.

Cara Membuat Jam Analog Estetik berformat CSS3

1. Tempelkan kode dibawah ini pada Tata Letak kemudian Tambah HTML / Javascript. Kodenya dibawah ini ya

<div class="clock">
<div class="hour hand" id="hour"></div>
<div class="minute hand" id="minute"></div>
<div class="seconds hand" id="seconds"></div>
</div>

2. Kemudian masuk kita ke template dan cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin>. Jangan salah taruh dibawahnya ya, nanti tidak keluar itu efeknya.

*{padding:0;margin:0;box-sizing:border-box;}
body{height:100vh;background:linear-gradient(
to bottom,#DC143C 50%,#16191e 50%
);}
.clock{background:#16191e;height:320px;width:320px;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;box-sizing:content-box;border-radius:50%;border:15px solid #242931;box-shadow:15px 15px 35px rgba(0,0,0,0.2),inset 0 0 30px rgba(0,0,0,0.4);}
img{position:relative;}
.hand{position:absolute;background-color:#ffffff;margin:auto;left:0;right:0;border-radius:5px;transform-origin:bottom;}
.hour{height:60px;width:10px;top:100px;}
.minute{height:80px;width:5px;top:80px;}
.seconds{height:90px;width:3px;top:70px;background-color:#DC143C;}

3. Kemudian cari lagi masih ditemplate ya. Cari kode </body> dan tempelkan kode dibawah ini di atas kode </body> tersebut. Ini kodenya.

<script type='text/javascript'>
//<![CDATA[  
let hour = document.getElementById("hour");let minute = document.getElementById("minute");let seconds = document.getElementById("seconds");let set_clock = setInterval(() =>{let date_now = new Date();let hr = date_now.getHours();let min = date_now.getMinutes();let sec = date_now.getSeconds();let calc_hr = (hr * 30) + (min / 2);let calc_min = (min * 6) + (sec / 10);let calc_sec = sec * 6;hour.style.transform = `rotate(${calc_hr;}
deg)`;minute.style.transform = `rotate(${calc_min;}
deg)`;seconds.style.transform = `rotate(${calc_sec;}
deg)`;}
,1000);//]]>
</script>

4. Sekarang save kerjaan kamu.

Semoga jadi ya tampilan jam analognya. Bila ingin melihat tampilannya bisa juga dilihat pada demo yang akan saya sajikan dibawah ini. Klik Result yang sudah saya pasang dibawah ini. Nah itulah jam analog yang sudah kita buat barusan. Sungguh estetik bukan. Tampilan yang kekinian dengan kekontrasan warna merah dan hitam sungguh memukau perpaduan warna yang solid. Thanks ya yang sudah mampir di sini di artikel Cara Membuat Jam Analog Estetik berformat CSS3.

DEMO

Jam dengan SVG Icon Modern dan Stylish

VARIASI jam yang lain saya sudah sediakan dibawah ini. Dengan kecanggihan pustaka CSS yang hebat, terciptalah berbagai aneka variasi dari bahasa pemrograman web satu ini. Seperti halnya jam yang ada ini.

Jam SVG dengan dimensi yang unik memang memiliki karakteristik tersendiri. Bagus dan bernuansa kekinian. Jam sekarang ini sudah berpenampilan menarik dan modern. Justru keunikan itu membuat daya tarik yang memikat.

Bila kalian ingin menerapkannya ke dalam bentuk konten jam, maka kalian harus menuliskan kode grafis SVG berikut ini melalui opsi penulisan "HTML" bukan Compose :

<canvas id="canvas" width="175" height="175"
style="background-color:#000000">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#000000');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#0000FF');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#000000';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>

Namun bila kalian ingin memasangnya menjadi widget, maka penerapannya akan seperti ini dengan cara :
1. Masuk ke Dashboard Blogger
2. Pilih Tata Letak
3. Pilih Tambahkan Gagdet
4. Pilih HTML/JavaScript

Nanti akan seperti ini jadinya.

Bagikan ke teman-teman kamu

Label Postingan : CSS , Javascript , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Membuat Jam Analog Estetik berformat CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.