CSS গ্রেডিয়েন্টের মৌলিক বিষয়সমূহ
CSS গ্রেডিয়েন্ট হলো এমন একটি ভিজ্যুয়াল উপাদান যা একটি রঙ থেকে অন্য রঙে মসৃণ রূপান্তর তৈরি করে। ওয়েব ডিজাইনে ব্যাকগ্রাউন্ড আকর্ষণীয় করতে এবং উপাদানগুলোর গভীরতা বাড়াতে গ্রেডিয়েন্ট ব্যাপকভাবে ব্যবহৃত হয়। এই রূপান্তরটি কীভাবে ঘটবে তা মূলত গ্রেডিয়েন্টের ধরন, দিক বা আকৃতি এবং ব্যবহৃত রঙের অবস্থানের ওপর নির্ভর করে।
গ্রেডিয়েন্ট জেনারেটর টুলটি ব্যবহার করে তিন ধরনের CSS গ্রেডিয়েন্ট তৈরি করা যায়: লিনিয়ার, রেডিয়াল এবং কনিক। প্রতিটি ধরনের গ্রেডিয়েন্টের নিজস্ব গাণিতিক বিন্যাস ও রঙের বিস্তার পদ্ধতি রয়েছে, যা ব্রাউজারে সরাসরি রেন্ডার হয়।
লিনিয়ার গ্রেডিয়েন্ট: দিক এবং কালার স্টপ
লিনিয়ার গ্রেডিয়েন্ট একটি সরলরেখা বরাবর রঙগুলোকে মিশ্রিত করে। এই রেখার দিক বা কোণ নির্ধারণের মাধ্যমে গ্রেডিয়েন্টের প্রবাহ পরিবর্তন করা যায়।
- কোণ (Angle): লিনিয়ার গ্রেডিয়েন্টের দিক নির্ধারণের জন্য একটি সংখ্যাসূচক মান ব্যবহার করা হয়, যা ডিগ্রিতে (° ) পরিমাপ করা হয়। এখানে ০° কোণটি সরাসরি উপরের দিকে নির্দেশ করে এবং ৯০° কোণটি ডানদিকে নির্দেশ করে। কোণের মান পরিবর্তনের সাথে সাথে রঙের প্রবাহের দিকও পরিবর্তিত হয়।
- রঙের মিশ্রণ: সরলরেখার শুরুর বিন্দু (০%) থেকে শেষ বিন্দু (১০০%) পর্যন্ত রঙগুলো ক্রমান্বয়ে পরিবর্তিত হয়। ব্যবহারকারী প্রয়োজন অনুযায়ী এই রেখার বিভিন্ন অবস্থানে নির্দিষ্ট রঙ পিন করে দিতে পারেন।
রেডিয়াল গ্রেডিয়েন্ট: আকৃতি ও রঙের বিস্তার
রেডিয়াল গ্রেডিয়েন্ট একটি নির্দিষ্ট কেন্দ্রবিন্দু থেকে শুরু হয়ে বাইরের দিকে বৃত্তাকার বা উপবৃত্তাকার উপায়ে রঙ ছড়িয়ে দেয়। লিনিয়ার গ্রেডিয়েন্টের মতো এতে কোনো কোণ বা দিক নির্ধারণের প্রয়োজন হয় না। এর পরিবর্তে ব্যবহারকারীকে গ্রেডিয়েন্টের সামগ্রিক আকৃতি নির্ধারণ করতে হয়।
টুলটিতে রেডিয়াল গ্রেডিয়েন্টের জন্য দুটি আকৃতি পাওয়া যায়:
- উপবৃত্ত (Ellipse): এটি একটি ডিম্বাকৃতি বা চ্যাপ্টা বৃত্তের মতো রঙ ছড়িয়ে দেয়, যা কন্টেইনারের দৈর্ঘ্য ও প্রস্থের অনুপাত অনুযায়ী সামঞ্জস্যপূর্ণ হয়।
- বৃত্ত (Circle): এটি কেন্দ্র থেকে চারদিকে সমান দূরত্ব বজায় রেখে নিখুঁত বৃত্তাকারে রঙ বিস্তার করে।
রঙের এই বিস্তারটি কেন্দ্রবিন্দু থেকে শুরু হয়ে বাইরের সীমানার দিকে অগ্রসর হয়, যেখানে প্রতিটি কালার স্টপ কেন্দ্রের দূরত্ব অনুযায়ী বিন্যস্ত থাকে।
কনিক গ্রেডিয়েন্ট: কেন্দ্রের চারপাশে রঙের ঘূর্ণন
কনিক গ্রেডিয়েন্ট একটি কালার হুইল বা রঙের চাকার মতো কাজ করে। এটি কেন্দ্র থেকে বাইরের দিকে রঙ ছড়ানোর পরিবর্তে, একটি নির্দিষ্ট কেন্দ্রবিন্দুকে অক্ষ করে তার চারপাশে ঘড়ির কাঁটার মতো রঙ ঘুরিয়ে নিয়ে আসে।
- কোণ (Angle): কনিক গ্রেডিয়েন্টের ক্ষেত্রে কোণ স্লাইডারটি রঙের ঘূর্ণন শুরুর দিক নির্ধারণ করে। লিনিয়ার গ্রেডিয়েন্টের মতোই, এখানে ০° কোণটি উপরের দিক থেকে ঘূর্ণন শুরু করে এবং ৯০° কোণটি ডানদিক থেকে ঘূর্ণন শুরু করে।
- ভিজ্যুয়াল এফেক্ট: এই গ্রেডিয়েন্টটি মূলত কৌণিক রূপান্তর তৈরি করে, যা পাই চার্ট, কালার হুইল বা থ্রি-ডি শঙ্কু আকৃতির ভিজ্যুয়াল তৈরি করতে অত্যন্ত কার্যকর।
গ্রেডিয়েন্ট ডিজাইনে কালার স্টপের ভূমিকা
কালার স্টপ হলো গ্রেডিয়েন্ট বরাবর নির্দিষ্ট অবস্থানে পিন করা রঙ। একটি গ্রেডিয়েন্টে রঙের রূপান্তর কতটা নিখুঁত হবে তা কালার স্টপের সংখ্যা এবং অবস্থানের ওপর নির্ভর করে।
- অবস্থান: প্রতিটি কালার স্টপের অবস্থান ০% থেকে ১০০% সীমার মধ্যে নির্ধারণ করা হয়। ০% অবস্থানটি গ্রেডিয়েন্টের শুরুর বিন্দু এবং ১০০% অবস্থানটি শেষ বিন্দু নির্দেশ করে।
- ডিফল্ট সেটিংস: টুলটি চালু করার সময় প্রাথমিকভাবে দুটি কালার স্টপ সেট করা থাকে:
#6366f1 0%এবং#ec4899 100%। - নতুন স্টপ যোগ করা: ব্যবহারকারী চাইলে নতুন কালার স্টপ যোগ করতে পারেন। নতুন যোগ করা প্রতিটি কালার স্টপ ডিফল্টভাবে ৫০% অবস্থানে সেট হয়।
- সর্বোচ্চ সীমা: এই টুলের সাহায্যে সর্বোচ্চ ৮টি কালার স্টপ ব্যবহার করা সম্ভব। যখন ৮টি কালার স্টপ পূর্ণ হয়ে যায়, তখন "স্টপ যোগ করুন" বাটনটি নিষ্ক্রিয় হয়ে যায়।
গ্রেডিয়েন্ট জেনারেটর টুলের ব্যবহার পদ্ধতি
এই টুলটি ব্যবহার করে অত্যন্ত সুনির্দিষ্টভাবে CSS গ্রেডিয়েন্ট কোড তৈরি করা সম্ভব। নিচে এর কার্যপ্রণালী সংক্ষেপে আলোচনা করা হলো:
| ধাপ | অ্যাকশন | বিবরণ |
|---|---|---|
| ১ | গ্রেডিয়েন্টের ধরন নির্বাচন | "গ্রেডিয়েন্টের ধরন" অংশ থেকে লিনিয়ার, রেডিয়াল অথবা কনিক বেছে নিন। |
| ২ | দিক বা আকৃতি নির্ধারণ | লিনিয়ার বা কনিকের জন্য "কোণ (Angle)" স্লাইডার ব্যবহার করুন। রেডিয়ালের জন্য "উপবৃত্ত (Ellipse)" বা "বৃত্ত (Circle)" নির্বাচন করুন। |
| ৩ | কালার স্টপ কনফিগারেশন | "স্টপ যোগ করুন" বাটনে ক্লিক করে নতুন স্টপ যোগ করুন (সর্বোচ্চ ৮টি)। প্রতিটি স্টপের জন্য "স্টপের রঙ" এবং "অবস্থান" স্লাইডার অ্যাডজাস্ট করুন। অপ্রয়োজনীয় স্টপ সরাতে "স্টপ বাদ দিন" ব্যবহার করুন। |
| ৪ | কোড সংগ্রহ | লাইভ প্রিভিউ দেখে সন্তুষ্ট হলে "CSS কপি করুন" বাটনে ক্লিক করুন। ক্লিক করার সাথে সাথে বাটনটির টেক্সট পরিবর্তিত হয়ে "Copied" দেখাবে। |
এই টুলের সমস্ত প্রসেসিং সরাসরি আপনার ব্রাউজারে সম্পন্ন হয়। আপনার কোনো সেটিংস বা ডেটা BroBroGo-তে আপলোড করা হয় না।
সাধারণ জিজ্ঞাসা (FAQ)
linear, radial এবং conic গ্রেডিয়েন্টের মধ্যে পার্থক্য কী?
একটি লিনিয়ার (linear) গ্রেডিয়েন্ট একটি নির্দিষ্ট কোণে সরলরেখা বরাবর রঙ মিশ্রিত করে। একটি রেডিয়াল (radial) গ্রেডিয়েন্ট কেন্দ্র থেকে বাইরের দিকে বৃত্ত বা উপবৃত্ত আকারে রঙ ছড়িয়ে দেয়। একটি কনিক (conic) গ্রেডিয়েন্ট কালার হুইলের মতো কেন্দ্রের চারপাশে রঙ ঘুরিয়ে নিয়ে আসে।
কালার স্টপ (color stops) কী?
প্রতিটি কালার স্টপ হলো গ্রেডিয়েন্ট বরাবর একটি নির্দিষ্ট অবস্থানে পিন করা রঙ — শুরুতে ০%, শেষে ১০০%। কোনো রঙের প্রভাব কোথায় সবচেয়ে বেশি হবে তা পরিবর্তন করতে স্টপটি সরান, অথবা আরও সমৃদ্ধ মিশ্রণের জন্য আরও স্টপ যোগ করুন। আপনি সর্বোচ্চ ৮টি স্টপ ব্যবহার করতে পারবেন।
আমি কীভাবে গ্রেডিয়েন্টের দিক নিয়ন্ত্রণ করব?
লিনিয়ার বা কনিক গ্রেডিয়েন্টের ক্ষেত্রে, অ্যাঙ্গেল স্লাইডারটি দিক নির্ধারণ করে — ০° উপরের দিকে এবং ৯০° ডানদিকে নির্দেশ করে। রেডিয়াল গ্রেডিয়েন্টের কোনো কোণ থাকে না; এর পরিবর্তে এটি কীভাবে ছড়াবে তা পরিবর্তন করতে বৃত্ত (circle) বা উপবৃত্ত (ellipse) আকৃতি বেছে নিন।