This project showcases a neon-styled text effect using HTML and CSS. The text, "Omid_MHR," features a retro-inspired, colorful shadow effect and a dynamic transition when hovered over.
An example of the neon-style text effect.
- Font Styling: Uses a custom font from an external URL (Meta Variable Demo).
- Hover Effect: Text weight and style change upon hovering, and shadow effects are removed for a cleaner look.
- Neon Shadow: The text is accompanied by vibrant, layered shadows, creating a neon-like effect that gives a retro and futuristic feel.
- Responsive Design: The text is centered on the screen and adjusts to fit any viewport.
- HTML: Contains a single
<div>element with a class"name"for styling. - CSS:
- Loads a custom font via
@font-face. - Sets the body background to a dark theme to make the neon effect pop.
- Adds multiple layers of shadow to the text for a 3D neon effect.
- Includes a hover effect that changes font-weight and removes the text shadow for a cleaner look.
- Loads a custom font via
To view this effect, open the index.html file in a web browser. Please make sure you have an internet connection to load the custom font.
Enjoy experimenting with this vibrant text effect! 🌐