CSS অ্যানিমেশন এবং টেক্সট শ্যাডো ব্যবহার করে নিওন বা গ্লোইং টেক্সট ইফেক্ট তৈরি করা যায়। এটি ডার্ক ব্যাকগ্রাউন্ডে সবচেয়ে ভালো লাগে।
উদাহরণ: গ্লোইং টেক্সট
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: rgb(0, 0, 0);
font-family: cursive;
}
.glowing {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glowing 1s ease-in-out infinite alternate;
-moz-animation: glowing 1s ease-in-out infinite alternate;
animation: glowing 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing{
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
}
}
</style>
</head>
<body>
<h1 class="glowing">GLOWING TEXT EXAMPLE</h1>
</body>
</html>
কোড ব্যাখ্যা
- @keyframes glowing: from এবং to স্টেটে ভিন্ন text-shadow মান দিয়ে পালসেটিং ইফেক্ট তৈরি করা হয়েছে।
- animation: glowing 1s ease-in-out infinite alternate: ১ সেকেন্ডে পূর্ণ সাইকিল, উভয় দিকেই চলে।
- ভেন্ডর প্রিফিক্স: পুরনো ব্রাউজার সাপোর্টের জন্য -webkit- এবং -moz- ব্যবহার করা হয়েছে।
কাস্টমাইজেশন টিপস
রঙ, ব্লার রেডিয়াস, অ্যানিমেশন গতি পরিবর্তন করে ভিন্ন ভিন্ন গ্লো ইফেক্ট তৈরি করা যায়।
