Stunning New Year Greeting with Glass Effect

As the New Year approaches, what better way to send warm wishes than with a beautifully crafted digital greeting card? In this blog, we’ll explore a step-by-step guide on creating an eye-catching New Year card with a glass effect using HTML and CSS. Don’t worry if you’re new to coding – we’ll keep it simple and fun!

Unveiling the Magic: HTML Structure

Our HTML lays the foundation for our celebration masterpiece. Let’s take a closer look:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>New Year Greeting Card</title>
  </head>
  <body>
    <div class="greeting-container">
      <div class="celebration-shapes"></div>
      <div class="greeting-card">
        <img src="happy-new-year.png" />
        <div class="text-content">
          <h2>Cheers to 2024</h2>
          <p>May your 2024 be as amazing as a rainbow-laden unicorn!</p>
        </div>
      </div>
    </div>
  </body>
</html>

HTML

Adding Style: CSS Magic

Our CSS adds the magic that brings the greeting card to life. Let’s explore the styling:

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
}
body {
  background-color: #bddaff;
}
.greeting-container {
  height: 450px;
  width: 600px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.celebration-shapes {
  height: 250px;
  width: 250px;
  background: linear-gradient(45deg, #b507a7, #fa80f0);
  border-radius: 50%;
  position: absolute;
  right: 0;
}
.celebration-shapes:before {
  content: "";
  position: absolute;
  height: 250px;
  width: 250px;
  top: 197px;
  background: linear-gradient(45deg, #0756b5, #80affa);
  border-radius: 50%;
  right: 347px;
}
.greeting-card {
  position: absolute;
  height: 300px;
  width: 550px;
  background-color: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  overflow: hidden;
}
.greeting-card img {
  position: absolute;
  width: 300px;
  filter: drop-shadow(0 0 20px rgba(26, 0, 68, 0.34));
  bottom: 0;
  left: 120px;
  transition: 0.5s;
}
.text-content {
  position: absolute;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  width: 250px;
  right: -250px;
  transition: 0.5s;
}
.greeting-card h2 {
  color: #1f0b50;
  text-transform: uppercase;
}
.greeting-card p {
  font-weight: 300;
  text-align: justify;
  color: #261844;
  line-height: 1.8;
  letter-spacing: 0.3px;
}
.greeting-card:hover img {
  width: 250px;
  left: 15px;
  bottom: 20px;
}
.greeting-card:hover .text-content {
  right: 15px;
}

CSS

Breaking Down the Styles

Greeting Container:
- Positioned at the center of the screen with a delightful background color.
Celebration Shapes:
- Circular shapes with vibrant gradient colors for a festive touch.
Greeting Card:
- A stylish card with a glass effect, border radius, and a subtle shadow.
- Contains an image and text content.
Image and Text Content:
- An image with a drop shadow for added flair.
- Text content with a beautiful color scheme and typography.
Hover Effects:
- Image and text content smoothly transition on hover for an interactive experience.

Bringing Your Card to Life

Image Source:
- Replace the placeholder image source (happy-new-year.png) with your preferred New Year image.
Text Content:
- Customize the heading and message to suit your personal New Year wishes.
Hover Effect Play:
- Experience the subtle hover effects by hovering over the greeting card.

Conclusion: Share the Joy!

Congratulations! You’ve just crafted a stunning New Year greeting card with a captivating glass effect. Whether you’re sending it digitally or embedding it on a website, this creation is sure to spread joy and warmth. Feel free to experiment with colors, images, and messages to make it uniquely yours.

Happy Coding!