https://github.com/talhat298/glowing-text
Glowing text can be achieved using CSS (Cascading Style Sheets) with the help of the "text-shadow" property. By setting the background color of the element to be transparent and the text-shadow to a color and offset, can create the impression of floating text.
https://github.com/talhat298/glowing-text
css3 googlefonts html5
Last synced: about 2 months ago
JSON representation
Glowing text can be achieved using CSS (Cascading Style Sheets) with the help of the "text-shadow" property. By setting the background color of the element to be transparent and the text-shadow to a color and offset, can create the impression of floating text.
- Host: GitHub
- URL: https://github.com/talhat298/glowing-text
- Owner: TalhaT298
- Created: 2023-02-08T14:01:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-29T12:43:46.000Z (10 months ago)
- Last Synced: 2024-11-29T13:40:47.154Z (10 months ago)
- Topics: css3, googlefonts, html5
- Language: CSS
- Homepage: https://ornate-monstera-17907d.netlify.app/
- Size: 1000 Bytes
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Glowing Text Effect
**Glowing Text** is a simple and visually appealing project that creates an interactive glowing effect on letters when clicked. Built with HTML and CSS, it uses animations and shadows to create a vibrant, neon-like glow.
---
## Features
- **Interactive Glow:** Click on a letter to activate the glowing effect.
- **Customizable Animation:** Smooth transitions and a dynamic hue-rotate effect.
- **Minimalist Design:** Clean and simple interface with a dark background.
---
## Demo
### Preview
A glowing text animation with toggling effect on user interaction.
---
## Technologies Used
- **HTML5** for structure.
- **CSS3** for styling, animations, and hover effects.
- **Google Fonts:** `Poppins` for typography.
---
## How It Works
1. **Checkbox Interaction:**
Each letter is paired with a hidden checkbox. Clicking toggles the glowing effect.
2. **CSS Animations:**
The glowing effect uses `text-shadow` and `@keyframes` to create a smooth, animated glow.
3. **Responsive Styling:**
Letters are styled with flexbox for perfect alignment and spacing.
---
## Usage
1. Clone the repository and open `index.html` in your browser:
```bash
git clone https://github.com/your-username/glowing-text.git
cd glowing-text
