In this article we will design a very beautiful Neumorphism Working Analog Clock UI Design . Here i have explain in a very informative way how you can made it . If you are a beginner then this tutorial will help you completely.
If you have very basic knowledge of html css and JavaScript then you can make this project very easily . So without without wasting any time lets look a working demo of this project . In a analog clock there are three hands thats indicate hours , minutes and seconds . Also i have provide the source code of this project so that you can use in your own work .
Hopefully the above demo fully will help you to understand the output of this project. This clock is basically fetch the data of your current device . First it will receive the current time from your device and then fetching data time and it will converted to degree and other hand will continuously rotating . It will updating continuously every seconds.
In the above example we use Neumorphism for designing this analog clock lets understand what is neumorphism design to design above clock .
What is Neumorphism design ?
“Neumorphism” is a new slang term in design circles — co-created by. — which essentially crosses the words “new” and “skeuomorphism”. Essentially, it’s a new, minimal way to design with a soft, extruded plastic look. It’s almost as if the interface has been vacuum-formed.
Hope you understand the meaning of neumorphism design lets start our working source code for this project.
Step 1: Basic design of webpage with HTML
Below i have used the basic HTML code to design the webpage . i have used four classes for minute hand and hour hand and last which is second hand of analog clock . For designing the back ground i have used very simple code to design shapes .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>The Best clocking system using css</title>
</head>
<body>
<div class="container">
<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>
<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>
</div>
Step 3: Basic design of webpage with CSS
Below i have used some amout of css to design webpage of this clock . i have used background color for the web page is background-color: #080710;
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #080710;
}
Step 4: Lets design the shape of the clock and background design .
.background{
width: 430px;
height: 520px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.background .shape{
height: 240px;
width: 240px;
position: absolute;
border-radius: 50%;
}
.shape:first-child{
background: linear-gradient(
#84fab0,
#8fd3f4
);
left: -90px;
top: -20px;
}
.shape:last-child{
background: linear-gradient(
to right,
#e6b980,
#eacda3
);
right: -70px;
bottom: -60px;
}
Step 5: Lets design the clock and clock hands
.clock
{
box-sizing: content-box;
background-color: rgba(255,255,255,0.07);
backdrop-filter: blur(10px);
height: 320px;
width: 320px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
border: 15px solid rgba(255,255,255,0.07);
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;
margin: auto;
left: 0;
right: 0;
border-radius: 5px;
transform-origin: bottom;
}
.hour{
height: 60px;
width: 8px;
top: 100px;
background-color: #ffffff;
}
.minute{
height: 80px;
width: 5px;
top: 80px;
background-color: #84fab0;
}
.seconds{
height: 90px;
width: 3px;
top: 70px;
background-color: #f8fc30;
}
Step 6: Lets make our Clock work with javascript .
Now I have taken time from the device using New Date(). NewDate is a JavaScript method that helps to take the current time from the device.
Similarly, using getHours () getMinutes () getSeconds () we have taken the time of hours, minutes, and seconds, respectively. Then the time taken is saved between hh mm and ss.
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);
Hopefully this tutorial has help you to understand the concept of how to design the neumorphism design using HTML CSS and Javascript . I have design many more design using HTML CSS and Javascript lets check out our channel ziontutorial.
