সিএসএসের সাহায্যে আপনার পাঠ্য উপাদানগুলিতে কীভাবে একটি রৈখিক গ্রেডিয়েন্ট রঙ যুক্ত করবেন এবং কীভাবে একটি সাধারণ গ্রেডিয়েন্ট ভুল এড়াবেন তা শিখুন।
আপনার HTML পাঠ্য উপাদানগুলিতে একটি গ্রেডিয়েন্ট টেক্সট রঙ যোগ করতে, আপনার নিম্নলিখিত CSS বৈশিষ্ট্যগুলির প্রয়োজন হবে:
background-webkit-background-clip-webkit-text-fill-color
কেন আমরা background ব্যবহার করছি টেক্সট রঙ করার জন্য সম্পত্তি? পদ্ধতিটি কিছুটা হ্যাকি বলে মনে হচ্ছে, তবে আমি প্রতিশ্রুতি দিচ্ছি যে এটি কাজ করে!
আসুন একটি দ্রুত উদাহরণ তৈরি করি যেখানে আমরা একটি পাঠ্য উপাদানে বাম থেকে ডানে একটি রৈখিক গ্রেডিয়েন্ট প্রয়োগ করি, নিম্নোক্ত দুটি রঙ, কমলা এবং লাল ব্যবহার করে:
HTML
একটি <h2> text-gradient নামে একটি ক্লাস অ্যাট্রিবিউট সহ শিরোনাম উপাদান :
<h2 class="text-gradient">Gradient text color!</h2>CSS
.text-gradient-এ রঙের গ্রেডিয়েন্ট শৈলী যোগ করুন ক্লাস:
.text-gradient {
/* Set the background color */
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
/* Mask the color to the text, and remove the rest */
-webkit-background-clip: text;
/* Make the text fill color value transparent so the masked background color comes through */
-webkit-text-fill-color: transparent;
}ফলাফল:
গ্রেডিয়েন্ট টেক্সট রঙ!
চমৎকার!
কিন্তু এক সেকেন্ড অপেক্ষা করুন!
টেক্সট এলিমেন্টে দুটি রঙ কিভাবে প্রয়োগ করা হয় তা নিয়ে আপনি কি কোনো সমস্যা লক্ষ্য করেন? রঙগুলি অসমভাবে প্রয়োগ করা হয়৷
linear-gradient CSS ফাংশন দুটি রঙের মান নেয়:
#ff8a00(কমলা)#DD4C4F(লাল)
এবং এটি 0 থেকে 100% সমানভাবে ছড়িয়ে পড়ার কথা, যেমন CSS এ উল্লেখ করা হয়েছে:
(to right, #ff8a00 0%, #DD4C4F 100%)তাই আমরা চাই এটি পাঠ্য উপাদানে:
কিন্তু আমাদের পাঠ্য উদাহরণ প্রায় সম্পূর্ণ কমলা:
গ্রেডিয়েন্ট টেক্সট রঙ!
টিপ:আপনি যদি এই ওয়েবসাইটের রঙের থিমটিকে ডার্ক মোডে টগল করেন (চাঁদ আইকনে ক্লিক করুন) এটি দেখতে সহজ৷
এটি ঘটে কারণ <h2> শিরোনাম উপাদান হল একটি ব্লক-লেভেল উপাদান, ডিফল্টরূপে। এর মানে হল তাদের পটভূমি সম্পূর্ণ প্রস্থ জুড়ে বিস্তৃত তাদের অভিভাবক কন্টেইনার।
এটি গ্রেডিয়েন্ট ক্লাস (.text-gradient থেকে রং তৈরি করে ) যা আমরা <h2> এ যোগ করেছি উপাদান আপনার পাঠ্যের প্রস্থের বাইরে প্রসারিত কারণ এটি background লক্ষ্য করে সম্পত্তি।
আমি আমার পয়েন্ট পরিষ্কার করতে পাঠ্য উদাহরণে একটি সীমানা যোগ করব:
গ্রেডিয়েন্ট টেক্সট রঙ!
আপনি কি সেটা দেখতে পাচ্ছেন?
পাঠ্য গ্রেডিয়েন্টগুলি শুধুমাত্র পাঠ্যের উপর সেট করা উচিত, এর পটভূমিতে নয় (কিন্তু আমাদের background ব্যবহার করতে হবে এই কাজ করার জন্য সম্পত্তি)।
এটি ঠিক করতে, আপনাকে <h2> ওভাররাইড করতে হবে উপাদানের ডিফল্ট display:block 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;
}ফলাফল:
গ্রেডিয়েন্ট টেক্সট রঙ!
মিষ্টি! আপনি পার্থক্য দেখতে পান কি? এখন দুই রঙের গ্রেডিয়েন্টের লাল অংশটি কমলার মতোই পপিং করছে কারণ সেগুলি 50-50 প্রয়োগ করা হয়েছে।
ব্রাউজার সামঞ্জস্য
গ্রেডিয়েন্ট কালার ট্রিক শুধুমাত্র ওয়েবকিট ব্রাউজারে সমর্থিত। অন্যান্য ব্রাউজারগুলির জন্য নিয়মিত CSS color ব্যবহার করুন একটি ফলব্যাক বিকল্প হিসাবে সম্পত্তি এবং গ্রেডিয়েন্টের অনুরূপ একটি রঙ ব্যবহার করুন।
