গ্রেডিয়েন্ট

CSS পডকাস্ট - 021: গ্রেডিয়েন্ট

কল্পনা করুন যে আপনি তৈরি করার জন্য একটি সাইট পেয়েছেন এবং শীর্ষে, একটি শিরোনাম, সারাংশ এবং একটি বোতাম সহ একটি ভূমিকা রয়েছে৷ ডিজাইনার এই ভূমিকার জন্য একটি বেগুনি পটভূমি রয়েছে এমন একটি নকশা হস্তান্তর করেছেন। একমাত্র সমস্যা হল ব্যাকগ্রাউন্ডে গ্রেডিয়েন্ট হিসাবে বেগুনি রঙের দুটি শেড রয়েছে। তুমি এটা কিভাবে করো?

আপনি প্রাথমিকভাবে মনে করতে পারেন যে এটির জন্য আপনাকে আপনার ডিজাইন টুল থেকে একটি চিত্র রপ্তানি করতে হবে, তবে আপনি পরিবর্তে একটি linear-gradient ব্যবহার করতে পারেন।

গ্রেডিয়েন্ট হল একটি ইমেজ এবং যে কোন জায়গায় ইমেজ ব্যবহার করা যেতে পারে, কিন্তু এটি CSS দিয়ে তৈরি করা হয়েছে এবং এটি রং, সংখ্যা এবং কোণ দিয়ে তৈরি। CSS গ্রেডিয়েন্ট আপনাকে দুটি রঙের মধ্যে একটি মসৃণ গ্রেডিয়েন্ট থেকে যেকোনো কিছু তৈরি করতে দেয়, একাধিক গ্রেডিয়েন্ট মিশ্রিত এবং পুনরাবৃত্তি করে চিত্তাকর্ষক আর্টওয়ার্ক পর্যন্ত।

লিনিয়ার গ্রেডিয়েন্ট

linear-gradient() ফাংশন ধীরে ধীরে দুই বা ততোধিক রঙের একটি চিত্র তৈরি করে। এটি একাধিক আর্গুমেন্ট নেয়, কিন্তু এটির সহজ কনফিগারেশনে, আপনি এইরকম কিছু রঙ পাস করতে পারেন এবং এটি তাদের মিশ্রিত করার সময় স্বয়ংক্রিয়ভাবে তাদের সমানভাবে বিভক্ত করবে।

.my-element {
    background: linear-gradient(black, white);
}

আপনি একটি কোণ বা কীওয়ার্ডও পাস করতে পারেন যা একটি কোণকে প্রতিনিধিত্ব করে। আপনি যদি কীওয়ার্ড ব্যবহার করতে চান, তাহলে to কীওয়ার্ডের পরে একটি দিক নির্দেশ করুন। এর অর্থ হল আপনি যদি কালো এবং সাদা একটি গ্রেডিয়েন্ট চান যা বাম (কালো) থেকে ডানে (সাদা) চলে, আপনি প্রথম আর্গুমেন্ট হিসাবে to right কোণটি নির্দিষ্ট করবেন।

.my-element {
    background: linear-gradient(to right, black, white);
}

একটি রঙ স্টপ মান সংজ্ঞায়িত যেখানে একটি রঙ থেমে যায় এবং তার প্রতিবেশীদের সাথে মিশে যায়। একটি গ্রেডিয়েন্টের জন্য একটি 45 ডিগ্রী কোণে লাল রঙের একটি গাঢ় ছায়া দিয়ে চলমান, গ্রেডিয়েন্টের আকারের 30% একটি হালকা লালে পরিবর্তিত হয়: এটি দেখতে এইরকম।

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

আপনি একটি linear-gradient() এ যতগুলি চান ততগুলি রঙ এবং রঙের স্টপ যোগ করতে পারেন এবং আপনি একটি কমা দিয়ে প্রতিটি গ্রেডিয়েন্টকে আলাদা করে একে অপরের উপরে গ্রেডিয়েন্ট লেয়ার করতে পারেন।

রেডিয়াল গ্রেডিয়েন্ট

একটি গ্রেডিয়েন্ট তৈরি করতে যা একটি বৃত্তাকার ফ্যাশনে বিকিরণ করে, radial-gradient() ফাংশন সাহায্য করতে পদক্ষেপ নেয়। এটি linear-gradient() এর মতো, কিন্তু একটি কোণ নির্দিষ্ট করার পরিবর্তে, আপনি ঐচ্ছিকভাবে একটি অবস্থান এবং শেষ আকৃতি নির্দিষ্ট করুন। আপনি যদি শুধু রং নির্দিষ্ট করেন, radial-gradient() center হিসেবে অবস্থানটিকে স্বয়ংক্রিয়ভাবে নির্বাচন করবে এবং বাক্সের আকারের উপর নির্ভর করে একটি বৃত্ত বা উপবৃত্ত নির্বাচন করবে।

.my-element {
    background: radial-gradient(white, black);
}

গ্রেডিয়েন্টের অবস্থান কীওয়ার্ড এবং/অথবা সংখ্যা মান ব্যবহার করে background-position অনুরূপ। রেডিয়াল গ্রেডিয়েন্টের আকার গ্রেডিয়েন্টের শেষ আকৃতির (বৃত্ত বা উপবৃত্ত) আকার নির্ধারণ করে এবং ডিফল্টভাবে হবে farthest-corner , যার মানে এটি কেন্দ্র থেকে বাক্সের সবচেয়ে দূরতম কোণে ঠিক মেলে। আপনি নিম্নলিখিত কীওয়ার্ডগুলিও ব্যবহার করতে পারেন:

• closest-corner গ্রেডিয়েন্টের কেন্দ্রের নিকটতম কোণার সাথে মিলিত হবে।
• closest-side গ্রেডিয়েন্টের কেন্দ্রের নিকটতম বাক্সের পাশের সাথে মিলিত হবে।
• farthest-side closest-side বিপরীত কাজ করবে।

linear-gradient মতো আপনি যত খুশি রঙের স্টপ যোগ করতে পারেন। একইভাবে, আপনি যত খুশি radial-gradients যোগ করতে পারেন।

কনিক গ্রেডিয়েন্ট

একটি কনিক গ্রেডিয়েন্টের আপনার বাক্সে একটি কেন্দ্র বিন্দু রয়েছে এবং এটি শীর্ষ থেকে শুরু হয় (ডিফল্টরূপে), এবং একটি 360 ডিগ্রি বৃত্তে ঘুরে যায়।

.my-element {
    background: conic-gradient(white, black);
}

conic-gradient() ফাংশন অবস্থান এবং কোণ আর্গুমেন্ট গ্রহণ করে।

ডিফল্টরূপে, কোণটি 0 ডিগ্রি যা কেন্দ্রে শীর্ষে শুরু হয়। আপনি যদি কোণটি 45deg সেট করেন তবে এটি উপরের ডানদিকে হবে। কোণ যুক্তি রৈখিক এবং রেডিয়াল গ্রেডিয়েন্টের মত যেকোন ধরনের কোণের মান গ্রহণ করে।

অবস্থানটি ডিফল্টভাবে কেন্দ্রে থাকে। রেডিয়াল এবং রৈখিক গ্রেডিয়েন্টের মতো, পজিশনিং কীওয়ার্ড-ভিত্তিক হতে পারে, অথবা এটি সাংখ্যিক মান দিয়ে সংজ্ঞায়িত করা যেতে পারে।

অন্যান্য গ্রেডিয়েন্ট প্রকারের মতো আপনি যত খুশি রঙের স্টপ যোগ করতে পারেন। এই ক্ষমতার জন্য একটি ভাল ব্যবহারের ক্ষেত্রে, কনিক গ্রেডিয়েন্ট সহ CSS এর সাথে পাই চার্ট রেন্ডার করা হচ্ছে।

পুনরাবৃত্তি এবং মিশ্রণ

প্রতিটি ধরণের গ্রেডিয়েন্টের একটি পুনরাবৃত্তির ধরনও রয়েছে। এগুলো হল repeating-linear-gradient() , repeating-radial-gradient() এবং repeating-conic-gradient() । তারা অ-পুনরাবৃত্ত ফাংশন অনুরূপ এবং একই আর্গুমেন্ট গ্রহণ. পার্থক্য হল যে যদি সংজ্ঞায়িত গ্রেডিয়েন্টটি তাদের উভয় আকারের উপর ভিত্তি করে বাক্সটি পূরণ করার জন্য পুনরাবৃত্তি করা যায় তবে তা হবে।

যদি আপনার গ্রেডিয়েন্ট পুনরাবৃত্তি হয় বলে মনে হয় না, আপনি সম্ভবত রঙ স্টপগুলির একটির জন্য একটি দৈর্ঘ্য সেট করেননি। উদাহরণস্বরূপ, আপনি রঙ স্টপ দৈর্ঘ্য সেট করে repeating-linear-gradient সহ একটি ডোরাকাটা পটভূমি তৈরি করতে পারেন।

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

আপনি background বৈশিষ্ট্যগুলিতে গ্রেডিয়েন্ট ফাংশনগুলিও মিশ্রিত করতে পারেন, পাশাপাশি আপনার পছন্দ মতো অনেকগুলি গ্রেডিয়েন্ট সংজ্ঞায়িত করতে পারেন, ঠিক যেমন আপনি একটি ব্যাকগ্রাউন্ড চিত্রের সাথে করেন। উদাহরণস্বরূপ, আপনি একাধিক রৈখিক-গ্রেডিয়েন্ট একসাথে মিশ্রিত করতে পারেন, বা একটি রেডিয়াল গ্রেডিয়েন্টের সাথে দুটি লিনিয়ার-গ্রেডিয়েন্ট মিশ্রিত করতে পারেন।

সম্পদ

• Conic.css - কনিক গ্রেডিয়েন্টের একটি দরকারী সংগ্রহ
• গ্রেডিয়েন্টের জন্য MDN গাইড
• গ্রেডিয়েন্ট জেনারেটর

আপনার উপলব্ধি পরীক্ষা করুন

গ্রেডিয়েন্ট সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন