কীভাবে শুধু CSS দিয়ে Glowing Text তৈরি করা যাই।

আসসালামু আলাইকুম।

আসা করি সবাই অনেক ভালো আছেন।

আলহামদুলিল্লাহ আমিও অনেক ভালো আছি।

 

আজ আমি দেখাবো কীভাবে শুধু মাত্র HTML & CSS দিয়ে Glowing Text তৈরি করতে পারবেন।

উদহরন হিসেবে নিচের ৫ সেকেন্ডের ভিডিওটা দেখতে পারেন।

 

তো চলুন দেখা যাক কীভাবে তৈরি করা যাই।

প্রথমেই আমরা html & css ফাইল তৈরি করে save করে নিবো এবং css ফাইলটি html file এর সাথে connect করে নিবো। এখন কোডিং করার সময়।

আমি এখানে html ফাইল এ div এর ভেতর glow নামে একটা class (class=”glow”) নিয়েছি। আর তার ভিতরে span tag এর ভিতর আমার text গুলা লিখেছি ।

আমাদের html এর কাজ শেষ এখন css এর খেলা।

 

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Glowing Text</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<div class=”glow”>

<span>I</span>

<span>L</span>

<span>O</span>

<span>V</span>

<span>E</span>

<span>Y</span>

<span>O</span>

<span>U</span>

</div>

</body>

</html>

Css এ আমি class glow এবং span tag কে কল করেছি। এখন আমার text এর size, height, width, position, border, margin দিয়েছি।

তারপর animation add করেছি ০%, ৫০% এবং ১০০% এ।

.glow span {

font-size: 40px;

display: inline-block;

width: 45px;

height: 45px;

text-align: center;

border: 25px solid rgba(255,255,255,0.4);

margin: 0 -2.5px;

animation: animate 1s linear infinite;

}

@keyframes animate {

0% {

color: #f00;

box-shadow: 0 2px 10px rgba(255,0,0,1);

border: 2px solid rgba(255,0,0,1);

}

50% {

color: #0f0;

box-shadow: 0 2px 10px rgba(0,255,0,1);

border: 2px solid rgba(0,255,0,1);

}

100% {

color: #f00;

box-shadow: 0 2px 10px rgba(255,0,0,1);

border: 2px solid rgba(255,0,0,1);

}

}

 

আসা করি কারো কোথায় বুঝতে সমস্যা হয় নি। কোডগুলা এখান থেকে কপি করতে সমস্যা হলে নিচে download link দেওয়া হলো ।

তবুও যদি কোথাও কোনো সমস্যা হয় জানাতে ভুলবেন না ।

 

ভালো থাকবেন, সুস্থ থাকবেন, অন্যকে সুস্থ রাখবেন।

আর করোনা থেকে সতর্ক থাকবেন।

আল্লাহ হাফেজ।

Coding Video

Code Download Link- Click_Here

The post কীভাবে শুধু CSS দিয়ে Glowing Text তৈরি করা যাই। appeared first on Trickbd.com.



from Trickbd.com https://ift.tt/3gvO2MW
via IFTTT

শেয়ার করুন
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট