ধরুন, আমি একটি লেখা রং করবো এজন্য আমাকে আপনারা আমাকে এইচটিএমএল কোড দেন?কিন্তু মনে রাখবেন আমি একের অধিক রঙের কথা বলছি।অর্থাৎ একটি লেখায় আমি দুইটি বা তিনটি রঙ্গ ব্যবহার করতে চাই এজন্য আমাকে এইচটিএমএল কোড দেন?
শেয়ার করুন বন্ধুর সাথে
Call
ভিডিও কলে ডাক্তারের পরামর্শ পেতে Play Store থেকে ডাউনলোড করুন Bissoy অ্যাপ
Call
ভিডিও কলে ডাক্তারের পরামর্শ পেতে Play Store থেকে ডাউনলোড করুন Bissoy অ্যাপ
Call
বিস্তারিত:click here
ভিডিও কলে ডাক্তারের পরামর্শ পেতে Play Store থেকে ডাউনলোড করুন Bissoy অ্যাপ
Call
এই জিনিসটা করার জন্যে আপনি সরাসরি কোন css কোড পাবেন না। এটা করতে হলে আপনাকে একটু ক্রিয়েটিভিটি খাটাতে হবে। যেমনঃ
প্রথমেই আমরা একটা div নেই এবং এটার ভিতর কিছু কোড লিখি।
<div> Hi, Color me with multiple color</div>
এটার রেসাল্ট আসবে এমনঃ
Hi, Color me with multiple color
এখন আমরা এর ব্যাকগ্রাউন্ডটাকে দুটি কালার দিয়ে ফিল করব।
<div style="background-image: linear-gradient(to right, lightgreen, green);">Hi, Color me with multiple color</div>
এটার রেসাল্ট হলোঃ
Hi, Color me with multiple color
এখন এটার ডিস্প্লে ইনলাইন ব্লক করে দিবো। তাহলে এমন দেখাবেঃ
<div style="background-image: linear-gradient(to right, lightgreen, green);display:inline-block;">Hi, Color me with multiple color</div>
রেসাল্টঃ
Hi, Color me with multiple color
এখন আমরা ব্যাকগ্রাউন্ডটাকে শুধু মাত্র যেই জায়গায় টেক্সট আছে সেই জায়গায় এভেইলেবল করে দিবো
<div style="background-image: linear-gradient(to right, lightgreen, green);display:inline-block;-webkit-background-clip:text;">Hi, Color me with multiple color</div>
এর রেসাল্ট হলো এমনঃ
Hi, Color me with multiple color
এখন আমরা লেখার কালারটাকে সচ্ছ্ব করে দিলেই ব্যাকগ্রাউন্ড কালারটাকে টেক্সট কালার হিসেবে পেয়ে যাবোঃ
<div style="background-image: linear-gradient(to right, lightgreen, green);display:inline-block;-webkit-background-clip:text;color: transparent;">Hi, Color me with multiple color</div>
রেসাল্টঃ
Hi, Color me with multiple color
আর এইভাবে আপনি এক লেখাই যতগুলো ইচ্ছে কালার করতে পারবেন।
উদাহরণঃ
<div style="background-image: linear-gradient(to right, lightgreen, green, blue, orange, red, silver, pink, olive);display:inline-block;-webkit-background-clip:text;color: transparent;font-weight: 700; font-size: 25px;">Hi, Color me with multiple color</div>
রেসাল্টঃ
Hi, Color me with multiple color
বিঃদ্রঃ আপনার ব্রাউজার যদি আপডেটেট না থাকে তাহলে এই ট্রিক্সটি আপনার ব্রাউজারে কাজ করবে না।
কোথাও বুঝতে সমস্যা হলে মন্তব্য করে জানাবেন।
ধন্যবাদ
ভিডিও কলে ডাক্তারের পরামর্শ পেতে Play Store থেকে ডাউনলোড করুন Bissoy অ্যাপ