Glowing Nav Text Design HTML

/ WEB CODES / By

In the sizeable realm of web improvement, growing visually charming and consumer-pleasant navigation menus is crucial. One manner to add a hint of class for your website's navigation is by means of enforcing sparkling text consequences. In this text, I will percentage my code layout associated with creating sparkling navigation text in HTML, shedding mild at the manner and the underlying CSS and JavaScript techniques that make it viable.

Why Glowing Navigation Text?

Glowing navigation text can make your internet site stand out. It provides a dynamic element on your website, drawing the consumer's attention to the menu alternatives and creating a memorable experience. Whether you need to create a futuristic vibe or simply add a few pizzazz on your layout, glowing text may be a valuable tool on your net development arsenal.

HTML Structure(index.html): 
				
					<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glowing Nav Text</title>
</head>

<body data-rsssl=1>
  <ul>
    <li style="--clr:#00ade1">
      <a href="#" data-text="&nbsp;Home">&nbsp;Home&nbsp;</a>
    </li>
    <li style="--clr:#ff6492">
      <a href="#" data-text="&nbsp;About">&nbsp;About&nbsp;</a>
    </li>
    <li style="--clr:#ffdd1c">
      <a href="#" data-text="&nbsp;Services">&nbsp;Services&nbsp;</a>
    </li>
    <li style="--clr:#00dc82">
      <a href="#" data-text="&nbsp;Blog">&nbsp;Blog&nbsp;</a>
    </li>
    <li style="--clr:#dc00d4">
      <a href="#" data-text="&nbsp;Contact">&nbsp;Contact&nbsp;</a>
    </li>
  </ul>
</body>

</html>
Explain:

The HTML structure defines an unordered list (<ul>) containing list items (<li>), each of which contains an anchor link (<a>) with a data-text attribute representing the text to be displayed. The style attribute in each <li> sets a custom CSS variable (–clr) for each menu item's color.

CSS (style.css):
				
					<style>
        @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Mochiy Pop One', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #252839;
}
ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
ul li {
  position: relative;
  list-style: none;
}
ul li a {
  font-size: 4em;
  text-decoration: none;
  letter-spacing: 2px;
  line-height: 1em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}
ul li a::before {
  content: attr(data-text);
  position: absolute;
  color: var(--clr);
  width: 0;
  overflow: hidden;
  transition: 1s;
  border-right: 8px solid var(--clr);
  -webkit-text-stroke: 1px var(--clr);
}
ul li a:hover::before {
  width: 100%;
  filter: drop-shadow(0 0 25px var(--clr))
}
    </style>
Explain:
  • The CSS imports the 'Mochiy Pop One' font from Google Fonts to style the text.
  • The <body> is styled to center its content both vertically and horizontally and set a background color.
  • The <ul> is set to be a flex container with a vertical column layout and a gap between items.
  • Each list item <li> is styled with no list-style and is positioned relatively.
  • The anchor links <a> inside the list items are styled with a large font size, no text decoration, and transparent text color with a subtle white text stroke to create an outline effect.
  • The ::before pseudo-element of each anchor link is used to create the glowing effect. It initially has no width (width: 0) and a hidden overflow.
  • On hover, the ::before pseudo-element expands its width to 100%, and a drop shadow is applied, creating the glowing effect.

Custom Color Variables: The style attribute in each list item sets a custom color variable –clr for that specific menu item. These color variables are then used in the ::before pseudo-element to define the color for the glowing effect.

In summary, this code creates a visually appealing glowing navigation text effect using CSS. Each menu item has a unique color, and the glow effect is activated when the user hovers over an item, creating an engaging and interactive navigation experience. The use of custom color variables makes it easy to customize the color of each menu item independently.

Scroll to Top