Create Glowing Text using CSS and HTML

CSS ka use karke text mein ek chamakdar (glowing) prabhav banana ke liye, text-shadow property ka istemal kiya jata hai. text-shadow property se hum text ke charo taraf ek virtual shadow create kar sakte hain, jisse text chamakta aur 3D-like lagta hai.
Create Glowing Text using CSS and HTML

Create Glowing Text using CSS and HTML

1. HTML Structure: 

Sabse pehle, humne ek HTML file banayi hai jisme ek div element hai jiska class glow-text hai. Yeh div hamara text container hoga.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Text</title>
</head>
<body>
    <div class="glow-text">
    <h2 contenteditable="true">Text</h2>
    </div>
</body>
</html>

2. CSS Styling: 

Ab hum CSS ka use karenge text ko style dene ke liye. Hamne .glow-text class ke liye kuch styles define ki hain.
 <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: rgb(42, 58, 57);
        }
        .glow-text{
            position: relative;
            font-size: 6em;
            letter-spacing: 15px;
            color: rgb(29, 41, 29);
            text-transform: uppercase;
            width: 100%;
            text-align: center;
            -webkit-box-reflect: below 1px linear-gradient(transparent, black);
            line-height: 0.70em;
            outline: none;
            animation: animate 5s linear infinite;
        }
        @keyframes animate{
            0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%{
                color:rgb(29, 41, 29);
                box-shadow: none;
            }
            18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%{
                color: white;
                text-shadow: 0 0 10px rgb(84, 235, 237),0 0 20px rgb(84, 235, 237),0 0 40px rgb(84, 235, 237),0 0 80px rgb(84, 235, 237),0 0 160px rgb(84, 235, 237);
                
            }
        }
</style>

3. Result: 

Jab aap HTML file ko browser mein open karenge, aap dekhenge ki text mein chamak wala effect add ho gaya hai.

Aap text ka color, shadow ka color, blur radius, ya dusri properties ko apne hisab se customize karke apne pasandeeda chamak wale prabhav ko achieve kar sakte hain. CSS ka use karke aap aur bhi anek tarah ke effect create kar sakte hain.

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Text</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: rgb(42, 58, 57);
        }
        .glow-text{
            position: relative;
            font-size: 6em;
            letter-spacing: 15px;
            color: rgb(29, 41, 29);
            text-transform: uppercase;
            width: 100%;
            text-align: center;
            -webkit-box-reflect: below 1px linear-gradient(transparent, black);
            line-height: 0.70em;
            outline: none;
            animation: animate 5s linear infinite;
        }
        @keyframes animate{
            0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%{
                color:rgb(29, 41, 29);
                box-shadow: none;
            }
            18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%{
                color: white;
                text-shadow: 0 0 10px rgb(84, 235, 237),0 0 20px rgb(84, 235, 237),0 0 40px rgb(84, 235, 237),0 0 80px rgb(84, 235, 237),0 0 160px rgb(84, 235, 237);
                
            }
        }
    </style>
</head>
<body>
    <div class="glow-text">
    <h2 contenteditable="true">Text</h2>
    </div>
</body>
</html>

Output:

Create Glowing Text using CSS and HTML

Humari Website me aane ke liye apka bahut-bahut dhanyawaad!

एक टिप्पणी भेजें

0 टिप्पणियाँ
* Please Don't Spam Here. All the Comments are Reviewed by Admin.