Learn how to design and develop a modern and stylish Glassmorphism calendar using HTML, CSS, and JavaScript. This tutorial will guide you through the steps to create a unique and elegant calendar layout.
Table of Contents
Glassmorphism is a design trend that has been gaining popularity recently in the world of UI (User Interface) design. It is a modern and sleek design style that makes use of transparency, blur, and light effects to create a three-dimensional effect on the user interface.
The Glassmorphism style is a great way to create a unique and elegant design for your website or application. It has a futuristic and sophisticated feel to it, which can make your website stand out from the competition.
In this tutorial, we will guide you on how to create a Glassmorphism-style calendar using HTML, CSS, and JavaScript. The calendar we'll be creating will feature a modern and stylish design that uses Glassmorphism principles.
By the end of this tutorial, you will have a good understanding of how to create a Glassmorphism-style calendar, which you can then use as a template for your own website or application.
Let's start making an amazing glassmorphism calendar using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our glassmorphism calendar.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
The HTML code includes the basic structure of an HTML document, which consists of opening and closing tags for the html, head, title, meta, link, and body elements.
The html tag specifies that the document is an HTML document and the lang attribute sets the language to English. The head tag contains meta information about the document, such as the title of the page and the character encoding used. The viewport meta tag is used to set the width of the page to match the device's screen width.
The link tag is used to link the CSS stylesheet file styles.css, which contains the styles for the calendar. The body tag contains the content of the page, which includes a div element with the class card that contains the calendar.
The calendar is divided into two div elements, the first one contains the current month and the second one contains the current day, date and year. The month, day, date and year are dynamically generated using JavaScript, which is loaded using the script tag that links to the script.js file.
This is the basic structure of our glassmorphism calendar using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the calendar is in place, the next step is to add styling to the glassmorphism calendar using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our glassmorphism effect.
The @import rule imports the Google Fonts library to use the Poppins font family in the stylesheet.
The * selector sets universal styles for all elements on the page, including removing padding and margin, using the border-box sizing model, applying a transition effect, and setting the font family to Poppins. The body selector sets a background image, using the background-image property, and applies various styles to it, such as repeating it, covering the entire viewport, and blending it with the background using background-blend-mode.
The card class selector defines the styles for the container that holds the calendar. It sets the width of the container, applies a linear gradient background, adds a box shadow effect, applies a blur filter to the background, rounds the corners of the container, and centers it on the page using position and transform properties.
The content class selector defines the styles for the content of the calendar. It sets the height of the content to 0, and centers it vertically using the justify-content property.
The #month, #day, #year, and #date selectors define the styles for the different parts of the calendar. #month sets the background color, font size, and weight for the current month. #day and #year set the font size for the current day and year. #date sets the font size and weight for the current date, as well as adding negative margin to adjust its position within the container.
This will give our glassmorphism calendar an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
transition: all 0.4s ease;
font-family: "Poppins", sans-serif;
}
body {
background-image: url(https://images.pexels.com/photos/161254/snow-romantic-village-snowy-161254.jpeg?auto=compress&cs=tinysrgb&w=1920);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-blend-mode: soft-light;
min-height: 100vh;
}
.card {
width: 280px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0));
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.01);
text-align: center;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content {
height: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
#month {
background: rgb(243, 45, 78);
padding: 10px 0;
font-size: 25px;
font-weight: 700;
}
#day,
#year {
font-size: 20px;
}
#date {
font-size: 120px;
font-weight: 700;
margin: -5px 0;
} Step 3 (JavaScript Code):
Finally, we need to create a JavaScript script that fetches and displays the current date and time on the Glassmorphism-styled calendar defined in the HTML and CSS code.
The code starts by defining variables that reference the elements in the HTML where the date, day, month, and year will be displayed. It also defines arrays that hold the names of days and months.
The update() function retrieves the current date and time using the Date() constructor and sets the text content of the corresponding HTML elements to display this information.
The document.body.onload event listener is used to execute the code inside its callback function when the page has finished loading. This function sets up an interval using setInterval() to call the update() function every second so that the date and time displayed in the calendar are always up-to-date.
Additionally, the function uses setTimeout() to delay the execution of a piece of code that modifies the CSS of the calendar. This code changes the height of the content element and the text color of the card element, causing the calendar to expand and change its color after a short delay.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
let date = document.getElementById("date"),
day = document.getElementById("day"),
month = document.getElementById("month"),
year = document.getElementById("year"),
days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
function update() {
let now = new Date();
date.innerText = now.getDate();
day.innerText = days[now.getDay()];
month.innerText = months[now.getMonth()];
year.innerText = now.getFullYear();
}
document.body.onload = () => {
setInterval(update, 1000);
setTimeout(() => {
document.getElementsByClassName("content")[0].style.height = "260px";
document.getElementsByClassName("card")[0].style.color = "#fff";
}, 500);
};Final Output:
See the Pen Glassmorphism Current Date Calendar by Faraz (@codewithfaraz) on CodePen.
Conclusion:
In conclusion, we hope this tutorial has provided you with the knowledge and tools necessary to create a stunning glassmorphism calendar using HTML, CSS, and JavaScript. By applying this modern design trend to a calendar, you can create an engaging and visually appealing tool for your users. Throughout this tutorial, we have covered the basics of glassmorphism, how to set up the HTML structure of the calendar, and how to style it using CSS. We also showed you how to add interactivity using JavaScript to make the calendar more engaging for users.
Remember, the key to creating a successful glassmorphism calendar is to balance style and function. Keep the design simple and clean, and focus on making it easy for users to interact with the calendar. We encourage you to experiment with different colors, fonts, and styles to make your calendar unique and reflective of your brand or personal style. Thank you for following along with us, and we wish you the best of luck in your design endeavors!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
