CSS Neumorphism Working Analog Clock UI Design using HTML,CSS and JAVASCRIPT

 

Hello friends, welcome to our blogspot TECH WITH ANURAG  and  in this blog we are going to learn how to create CSS Neumorphism Working Anlog Clock UI Design using HTML,CSS and JAVASCRIPT in this blog post.

As you can see in the image, this is an Analog Clock which is based in HTML CSS & Javascript. There are  3 handles for showing minutes, hours, and second. As usually, minute handle in bigger than that the hour handle , and the second handle larger.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(CSS Neumorphism Working Anlog Clock UI Design using HTML,CSS and JAVASCRIPT).

Video Tutorial of CSS Neumorphism Working Anlog Clock UI

I hope you like this program and video tutorial😊

If you like this program(CSS Neumorphism Working Anlog Clock UI Design using HTML,CSS and JAVASCRIPT) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program. 

To get the source code you simply need to look down.

You might like this:

• Animated Share Button Using Only HTML & CSS
• Image Overlay Hover Effects Using HTML and CSS
• Amazing Mail Button SVG Animation | HTML & CSS |
• Mobile Menu Design Using HTML & CSS (no Javascript)

CSS Neumorphism Working Anlog Clock UI Design[source code]

Before the sharing the codes of this program(CSS Neumorphism Working Anlog Clock UI Design using HTML,CSS and JAVASCRIPT).Let's talk about some important tags and codes of this program. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file. First, in the HTML file i created a <div> with the class name 'clock' and inside this <div> i created another three <div> for hours, minutes and seconds.

In CSS file first (if you not using bootstrap) reset the all default padding and margin to 0.

HTML FILE:

<div class="clock"> <div class="hour"> <div class="hr" id="hr"></div> </div> <div class="min"> <div class="mn" id="mn"></div> </div> <div class="sec"> <div class="sc" id="sc"></div> </div> </div>

CSS FILE:

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #282828; } .clock { display: flex; width: 350px; height: 350px; justify-content: center; align-items: center; border: 4px solid #191919; border-radius: 50%; box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5), inset 4px 4px 10px rgba(0, 0, 0, 0.5), inset -4px -4px 10px rgba(67, 67, 67, 0.3), 4px 4px 10px rgba(0, 0, 0, 0.3); } .clock:before { content: ""; position: absolute; width: 15px; height: 15px; background: #747474; border-radius: 50%; z-index: 999; } .clock .hour, .clock .min, .clock .sec { position: absolute; } .clock .hour, .hr { width: 160px; height: 160px; } .clock .min, .mn { width: 190px; height: 190px; } .clock .sec, .sc { width: 230px; height: 230px; } .hr, .mn, .sc { display: flex; justify-content: center; /*align-items: center;*/ position: absolute; border-radius: 50%; } .hr:before { content: ""; position: absolute; width: 8px; height: 80px; background: #ffb510; z-index: 9; border-radius: 6px 6px 0 0; } .mn:before { content: ""; position: absolute; width: 4px; height: 90px; background: #8b8b8b; z-index: 10; border-radius: 6px 6px 0 0; } .sc:before { content: ""; position: absolute; width: 2px; height:150px; background: #e5e5e5; z-index: 11; border-radius: 6px 6px 0 0; }

JAVASCRIPT FILE:

const deg = 6; const hr = document.querySelector('#hr'); const mn = document.querySelector('#mn'); const sc = document.querySelector('#sc'); setInterval(() =>{ let day = new Date(); let hh = day.getHours() * 30; let mm = day.getMinutes() * deg; let ss = day.getSeconds() * deg; hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`; mn.style.transform = `rotateZ(${mm}deg)`; sc.style.transform = `rotateZ(${ss}deg)`; })