CSS দিয়ে HTML টেক্সট এলিমেন্টে লিনিয়ার গ্রেডিয়েন্ট কালার যোগ করা শিখুন এবং একটি সাধারণ ভুল এড়িয়ে চলুন।
গ্রেডিয়েন্ট টেক্সট কালারের জন্য নিচের তিনটি CSS প্রপার্টি লাগে:
background-webkit-background-clip-webkit-text-fill-color
background প্রপার্টি টেক্সট কালারিংয়ের জন্য ব্যবহার করা হয় বলে হ্যাকি লাগতে পারে, কিন্তু এটি কাজ করে!
HTML
<h2 class="text-gradient">Gradient text color!</h2>CSS
.text-gradient {
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}সমস্যা: অনইভেন কালার ডিস্ট্রিবিউশন
গ্রেডিয়েন্ট দুটি রঙ (#ff8a00 অরেঞ্জ, #DD4C4F লাল) ০% থেকে ১০০% পর্যন্ত সমানভাবে ছড়িয়ে দিতে কথা, কিন্তু <h2> ব্লক-লেভেল এলিমেন্ট হওয়ায় এর ব্যাকগ্রাউন্ড পুরো কন্টেইনারের প্রস্থে ছড়িয়ে যায়। ফলে টেক্সটের প্রস্থের বাইরেও গ্রেডিয়েন্ট ছড়িয়ে পড়ে এবং কালার ডিস্ট্রিবিউশন অনইভেন হয়।
সমাধান: display: inline-block
.text-gradient {
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}এখন গ্রেডিয়েন্ট শুধু টেক্সটের প্রস্থে সীমাবদ্ধ থাকে এবং দুটি রঙ ৫০-৫০ পপ করে।
ব্রাউজার কম্প্যাটিবিলিটি
এই ট্রিক শুধু WebKit ব্রাউজার suport করে। অন্যান্য ব্রাউজারের জন্য রেগুলার CSS color প্রপার্টি ফলব্যাক হিসেবে ব্যবহার করুন।
