https://github.com/omid2831/animatedstylename

This project demonstrates the functionality of animated markers, names, and other elements when a user hovers over them
https://github.com/omid2831/animatedstylename

Last synced: 22 days ago
JSON representation

This project demonstrates the functionality of animated markers, names, and other elements when a user hovers over them

• Host: GitHub
• URL: https://github.com/omid2831/animatedstylename
• Owner: Omid2831
• Created: 2024-10-20T12:33:45.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-13T21:05:21.000Z (about 1 month ago)
• Last Synced: 2024-11-13T21:29:45.810Z (about 1 month ago)
• Language: CSS
• Homepage: https://omid2831.github.io/AnimatedStyleName/
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🎨 AnimatedStyleName

---

## 🌈 Omid_MHR Text Style Project

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.

---

## 🖼 Demo

![Omid_MHR Demo](img/sample.png)

*An example of the neon-style text effect.*

---

## ✨ Features

- **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.

---

## 🛠 Code Structure

- **HTML**: Contains a single `
` 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.


---

## 🚀 Usage

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! 🌐