Dear Friends in this artcle we will discuss about how to create Neumorphism Clock Using Html, CSS and JavaScript. This is a best article for make a neumorphism clock and i hope you like our article. Here you can get best ui design for web projects and you can use any projects with required. And we are created already css creatives you can find them with searching.
Table of Contents
Let’s the start
First i hope you knowledge about html, css and javascript then you can understand it otherwise copy my source code and paste your projects for make changes easily. If you want to learn html, css and javascript then go to w3school site and find any language then learn it. W3school is the best for learn web developent tutorials. In this site you can get multiple course and learn free with try button for live implement. After learn it you can make easily this neumorphism clock.
Now we will know how to start making this neomorphism clock. So you have to install Visual Studio Code Editor first. By the way, there are many code editors with which you can easily create this project, but we will speak only Visual Studio Code for this because through this you can easily create any project. It has many such features that will make your work very easy. So let’s know how to download and install it on your system. For this, you have to go to its official site and download it from your sister for Windows or Mac, whatever you work on, then install it then you can make easily neumorphism clock.
HTML For Clock
Now we will know how to use html, first of all you have to open Visual Studio Code. After that you have to go to the right side and select the new file. And keeping its name as per your wish, put a dot in the last and keep it html. Then your file will become html file after that you have to control plus one key. The syntax of html will be generated in front of you, then you put a clock in its title. Then take a div tag and name its class Clock. Have to take another div tag again. And keep the class name as Center and save it like this.
After this you have to take the ul tag, then you have to take the list inside it, inside the list you have to take the span tag. And inside that you have to take a div and put its class name as pointer. Similarly you have to take one more list. And inside it also you have to take div inside span tag. And its class name will also be a pointer, just like the list above. You have to take the list again.
And have to take span tag inside that. And inside that you have to give 3 lentils. In the same way, we have to take the list again 3 times. And this time, out of the dreams that are in the lowest list, 3 have to be given 6 pulses. Again you have to select all the lists. And copy and paste it below 6 lists. After doing this, instead of the above 3 and 6, you have to put 9 and 12, leave everything else like this.
HTML Out Put..
If you are not able to understand even after reading. So you copy the source code of our html given below and then go and paste it in your code editor. So that your work becomes easy.
HTML Source Code.
<div class="clock">
<div class="set H" data-hour></div>
<div class="set M" data-minute></div>
<div class="set S" data-second></div>
<div class="center"></div>
<ul>
<li><span><div class="pointer"></div></span></li>
<li><span><div class="pointer"></div></span></li>
<li><span>3</span></li>
<li><span><div class="pointer"></div></span></li>
<li><span><div class="pointer"></div></span></li>
<li><span>6</span></li>
<li><span><div class="pointer"></div></span></li>
<li><span><div class="pointer"></div></span></li>
<li><span>9</span></li>
<li><span><div class="pointer"></div></span></li>
<li><span><div class="pointer"></div></span></li>
<li><span>12</span></li>
</ul>
</div>CSS For Clock Design
Now we will know how to use css. So first of all you have to know how we use css. So let’s know how to use it. We use css in three ways, first we also use it inline. And secondly we also use it internally. Thirdly, we also use it externally. But we have used css internally in this design. For that you have to go to your head section. And you have to type style, then the style tag will come in front of you, then closing it also has to be done. After this you have to take * inside it, then open and close curly braces. Then add margin 0 padding 0 box sizing border box something like this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Then you have to take body tag and write some css in it like display flex, justify content center, align items center, min height 100vh background rga something like this.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(80,80,80);
}
Then you have to take clock class then in that you have to give properties like width 400px height 400px border radius 50%, border 2px solid rgb background color rgb margin 50px auto 0px auto, position relative, box shadow 2px 5px 8px rgba -3px -5px 8px rgb inset 2px 5px 8px rgba inset -3px -5px 8px rgb something like this.
.clock {
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid rgb(217, 226, 225);
background-color: rgb(217, 226, 225);
margin: 50px auto 0px auto;
position: relative;
box-shadow: 2px 5px 8px rgba(109, 109, 109, 0.4),
-3px -5px 8px rgb(238, 238, 238),
inset 2px 5px 8px rgba(109, 109, 109, 0.4),
inset -3px -5px 8px rgb(238, 238, 238);
}
You will find the rest of the information in our source code, so you can copy our source code and paste it in your style. So that you will not face any problem in using it.
CSS Source Code.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(217, 226, 225);
}
.clock {
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid rgb(217, 226, 225);
background-color: rgb(217, 226, 225);
margin: 50px auto 0px auto;
position: relative;
box-shadow: 2px 5px 8px rgba(109, 109, 109, 0.4),
-3px -5px 8px rgb(238, 238, 238),
inset 2px 5px 8px rgba(109, 109, 109, 0.4),
inset -3px -5px 8px rgb(238, 238, 238);
}
.center {
background-color: rgb(17, 0, 255);
position: absolute;
left: 50%;
bottom: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
transform: translate(-50%, 50%);
}
.set {
--r: 0;
position: absolute;
left: 50%;
bottom: 50%;
transform: translate(-50%) rotate(calc(var(--r)*1deg));
transform-origin: bottom;
border-radius: 5px 5px 0px 0px;
}
.H {
width: 10px;
height: 20%;
background-color: rgb(236, 0, 79);
}
.M {
width: 6px;
height: 30%;
background-color: #000;
}
.S {
width: 3px;
height: 37%;
background-color: rgb(4, 133, 165);
}
.clock ul {
list-style: none;
padding: 0;
}
.clock ul li {
position: absolute;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
color: rgb(14, 13, 13);
}
.pointer{
width: 3px;
height: 15px;
background-color: black;
}
.clock ul li:nth-child(1) {
right: 25%;
top: 11%;
transform: rotate(30deg);
}
.clock ul li:nth-child(2) {
right: 10%;
top: 27%;
transform: rotate(60deg);
}
.clock ul li:nth-child(3) {
right: 5%;
top: 48%;
font-size: 40px;
font-family: verdana;
font-weight: bold;
}
.clock ul li:nth-child(4) {
right: 10%;
top: 67%;
transform: rotate(-60deg);
}
.clock ul li:nth-child(5) {
right: 24%;
top: 84%;
transform: rotate(-30deg);
}
.clock ul li:nth-child(6) {
right: 49%;
top: 89%;
font-size: 40px;
font-family: verdana;
font-weight: bold;
}
.clock ul li:nth-child(7) {
right: 67%;
top: 85%;
transform: rotate(35deg);
}
.clock ul li:nth-child(8) {
right: 83%;
top: 71%;
transform: rotate(60deg);
}
.clock ul li:nth-child(9) {
right: 90%;
top: 48%;
font-size: 40px;
font-family: verdana;
font-weight: bold;
}
.clock ul li:nth-child(10) {
right: 85%;
top: 27%;
transform: rotate(125deg);
}
.clock ul li:nth-child(11) {
right: 66%;
top: 11%;
transform: rotate(-30deg);
}
.clock ul li:nth-child(12) {
right: 52%;
top: 5%;
font-size: 40px;
font-family: verdana;
font-weight: bold;
}JavaScript For Clock
setInterval(setClock, 1000);
const hour = document.querySelector('.H')
const minute = document.querySelector('.M')
const second = document.querySelector('.S')
function setClock() {
const nowDate = new Date();
const sR = nowDate.getSeconds() / 60;
const mR = (sR + nowDate.getMinutes()) / 60;
const hR = (mR + nowDate.getHours()) / 12;
const sec = nowDate.getSeconds();
const min = nowDate.getMinutes();
const hours = nowDate.getHours()
setRotation(hour, hR);
setRotation(minute, mR);
setRotation(second, sR);
}
function setRotation(element, rR) {
element.style.setProperty('--r', (rR * 360));
}
setClock();
