Learn how to create a dynamic 'Hello, Viewer' greeting on your webpage using simple HTML and CSS. This tutorial guides you through styling text and adding a unique wave animation with a hover effect, allowing you to add a personalized and engaging touch to your web design.

Introduction

In today's world of digital interaction, a simple greeting can make a big difference. How about making that greeting a little more interactive and fun? In this tutorial, we'll explore how to create a waving "Hello, Viewer" effect using just HTML and CSS. This effect adds a personal touch and brings a playful vibe to a webpage.

Step 1: HTML Structure

The HTML structure for our effect is straightforward. We'll create an h1 tag containing two span elements, each for a different part of our greeting:

<h1><span>Hello</span><span>Viewer</span></h1>

Step 2: Styling the Base Layout

Next, we'll add some CSS to style our greeting. We want our text to be bold, monospaced, and centered on the page, with a specific letter spacing:

body {
  padding: 0;
  margin: 0;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
h1 {
  color: #484848;
  font-size: 50px;
  font-weight: bold;
  font-family: monospace;
  letter-spacing: 7px;
  cursor: pointer;
  position: relative;
}

Step 3: Adding the Hover Effect

Our effect comes alive when the user hovers over the text. We'll create an animation that changes the color of the text and adds a shadow:

h1 span {
  transition: .5s linear;
}
h1:hover span:nth-child(1) {
  margin-right: 5px;
}
h1:hover span:nth-child(1):after {
  content: "\1F44B"; /* Unicode code for waving hand emoji */
  font-size: 50px; /* Adjust this to fit your desired size */
}
h1:hover span:nth-child(2) {
  margin-left: 30px;
}
h1:hover span {
  color: #fff;
  text-shadow: 0 0 2px #fff,
               0 0 5px #fff;
}

Complete Code Codepen Link : Clickhere

Conclusion

And there you have it! With a simple combination of HTML and CSS, we've created a unique and interactive "Hello, Viewer" effect. By using hover effects and CSS transitions, we've added a dynamic touch that can engage visitors and make your website stand out.

Whether you're building a personal portfolio or a creative project, this simple effect can add a touch of personality. Feel free to experiment with the colors, sizes, and transitions to make this effect your own. Happy coding!