Creating Glassmorphism Clock Html Css Javascript

Creating Glassmorphism Clock Html Css Javascript

Introduction:

Dive into the captivating world of glassmorphism as we take you on a creative journey to design a stunning glass clock using the power of HTML, the artistry of CSS, and the magic of JavaScript. 🌟✨

In this short and engaging tutorial, you'll learn step-by-step how to bring the mesmerizing glassmorphism trend to life, combining transparency, vibrant colors, and sleek aesthetics to craft a functional and stylish glass clock. 🕰️🔮

🔷 Uncover the essentials of HTML structures for building the foundation. 🔶 Implement smooth and alluring glass effects using CSS properties. 🌀 Add interactivity and dynamic time updates using the magic of JavaScript. 💡 Pro tips to optimize your code and enhance the overall user experience. 🎨 Explore customization options to make your glass clock uniquely yours.

Whether you're a coding enthusiast, a design aficionado, or simply curious about the latest design trends, this tutorial offers an exciting opportunity to learn, create, and showcase your skills.

Join us on this creative adventure as we combine technology and art to produce a mesmerizing Glassmorphism Clock that's sure to impress! Don't miss out – hit that play button and let's get started! 🎬🌈✍️"

Feel free to modify and personalize this description to fit your style and the content of your video.

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GlassMorphism Clock</title>
  <style>
    body {
  background: url(https://assets.codepen.io/7773162/circle.png)
    no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
}
.clock {
  height: 320px;
  width: 320px;
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-box-shadow: 30px 30px 35px rgba(0, 0, 0, 0.25);
  box-shadow: 30px 30px 35px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.1);
}
img {
  opacity: 0.6;
}
.hand {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 5px;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
}
.hour {
  height: 60px;
  width: 10px;
  top: 100px;
}
.minute {
  height: 80px;
  width: 5px;
  top: 80px;
}
.seconds {
  height: 90px;
  width: 3px;
  top: 70px;
}
a {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  position: absolute;
  right: 20px;
  top: 20px;
  border: 3px solid #ffffff;
  border-radius: 5px;
  text-decoration: none;
}
a > .fa {
  color: #ff0000;
}
@media screen and (min-width: 451px) {
  a {
    font-size: 18px;
    padding: 8px 12px 8px 12px;
  }
}
@media screen and (max-width: 450px) {
  a {
    font-size: 12px;
    padding: 5px 8px 5px 8px;
  }
}

  </style>
</head>
<body>
  <div class="clock">
    <img src="https://dl.dropbox.com/s/f3b3lyanili7zl2/clock%20template-01.svg?raw=1">
    <div class="hour hand" id="hour"></div>
    <div class="minute hand" id="minute"></div>
    <div class="seconds hand" id="seconds"></div>
  </div>
  </div>
</body>
<script>
  var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");
var set_clock = setInterval(function clock() {
  var date_now = new Date();
  var hr = date_now.getHours();
  var min = date_now.getMinutes();
  var sec = date_now.getSeconds();
  var calc_hr = hr * 30 + min / 2;
  var calc_min = min * 6;
  var 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>
</html>

Creating Glassmorphism Clock Html Css Javascript

Post a Comment

Zombie Shooter Game Using Html Css Javascript

C++ Mastery

Contact form

Creating Glassmorphism Clock Html Css Javascript

You may like these posts

Post a Comment

Contact form