সিএসএস(৩) গ্রেডিয়েন্ট দুই বা ততোধিক কালারের মধ্যে প্রগতিশীল পরিবর্তন(transition) সাধন এর মাধ্যমে একটি ইমেজ তৈরি করে। সুতরাং আপনি গ্রেডিয়েন্ট ব্যবহার করে একাধিক কালারের মিশ্রণে একটি এলিমেন্ট এর ব্যাকগ্রাউন্ড কালার সেট করতে পারবেন।

সিএসএস(৩) আসার পূর্বে গ্রেডিয়েন্ট তৈরি করার জন্য ইমেজ ব্যবহার করা হতো। যাইহোক, বর্তমানে আপনি সিএসএস(৩) গ্রেডিয়েন্ট ব্যবহার করে সময় এবং ব্যান্ডউইডথ উভয়ই সাশ্রয় করতে পারবেন।

এছাড়া আপনি যদি ইমেজ ব্যবহার করে গ্রেডিয়েন্ট তৈরি করেন তাহলে পেজ zoom করা হলে ইমেজ এর কালার খারাপ দেখাতে পারে। কিন্তু একই কাজ আপনি যদি গ্রেডিয়েন্ট ব্যবহার করে করেন তাহলে কালার একই থাকবে এবং ব্যাকগ্রাউন্ডও অনেক চমৎকার দেখাবে। কারণ গ্রেডিয়েন্ট ব্রাউজার কর্তৃক সৃষ্টি হয়।

সিএসএস(৩) তে দুই ধরনের গ্রেডিয়েন্ট রয়েছেঃ

সিএসএস(৩) লিনিয়ার গ্রেডিয়েন্ট

সিএসএস(৩) linear-gradient() ফাংশন এমন একটি চিত্র তৈরি করে যা একটি সরল রেখা বরাবর দুই বা ততোধিক রং এর মধ্যে একটি প্রগতিশীল পরিবর্তন(transition) সৃষ্টি করে।

লিনিয়ার গ্রেডিয়েন্ট তৈরির জন্য আপনাকে কমপক্ষে দুটি কালার সিলেক্ট করতে হবে। কালার গুলোর সুষম ট্রানজিশনের মাধ্যমে গ্রেডিয়েন্ট তৈরি হয়।

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

background: linear-gradient(দিক, প্রথম কালার, দ্বিতীয় কালার, ...); 

গঠন এর ভ্যালুসমূহের ব্যাখ্যা

• দিক - এটি দুই বা ততোধিক কালার এর পরিবর্তন(transition) এর দিক নির্ধারণ করে। যেমন- উপর থেকে নিচে, বাম থেকে ডানে, কোণাকুণি ইত্যাদি।
• প্রথম কালার, দ্বিতীয় কালার, ... - এগুলো হলো কালার স্টপ এবং এর ঠিক পরেই শতকরা অথবা দৈর্ঘ্য এককে গ্রেডিয়েন্ট অক্ষের জন্য স্টপ(stop) পজিশন দেওয়া হয়।

লিনিয়ার গ্রেডিয়েন্ট এর উদাহরণ

kt_satt_skill_example_id=1457

কোণ এর ব্যবহার

আপনি যদি গ্রেডিয়েন্টের দিক আরো ভালভাবে নিয়ন্ত্রন করতে চান তাহলে পূর্ব নির্ধারিত দিকের পরিবর্তে একটি কোণ নির্ধারণ করুন।

গঠন

background: linear-gradient(কোণ, প্রথম কালার, দ্বিতীয় কালার, ...); 

এখানে কোণ এর প্রাথমিক ভ্যালু 0deg(top) এবং ধনাত্মক মান বৃদ্ধির সাথে সাথে ঘড়ির কাঁটার দিকে ঘুরে এবং ঋণাত্মক মান বৃদ্ধির সাথে সাথে ঘড়ির কাঁটার বিপরীতে ঘুরে।

আমরা কোণ ব্যবহার করে যেকোনো ধরনের গ্রেডিয়েন্ট তৈরি করতে পারি।

kt_satt_skill_example_id=1458

একাধিক কালার ব্যবহার করে লিনিয়ার গ্রেডিয়েন্ট তৈরি

নিম্নের উদাহরণে আমরা একাধিক কালার ব্যবহার করে লিনিয়ার লগ্রেডিয়েন্ট তৈরি করবোঃ

kt_satt_skill_example_id=1461

ট্রান্সপারেন্সি(Transparency) ব্যবহার

গ্রেডিয়েন্টে আমরা ট্রান্সপারেন্সি বা স্বচ্ছতা ব্যবহার করতে পারি যা ফেইড(fade) ইফেক্ট তৈরি করতে ব্যবহৃত হয়।

ট্রান্সপারেন্সি যুক্ত করতে হলে আপনাকে কালার নির্ধারণ করার সময় rgba() ফাংশনটি ব্যবহার করতে হবে। rgba() ফাংশনের মধ্যে শেষ প্যারামিটারটির মান ০.০ থেকে ১.০ পর্যন্ত হতে হবে এবং এটি কালারের ট্রান্সপারেন্সি নির্ধারণ করে। যেখানে ০.০ সম্পূর্ণ ট্রান্সপারেন্সি নির্দেশ করে এবং ১.০ সম্পূর্ণ কালার নির্দেশ করে।

নিম্নের উদাহরণে একটি লিনিয়ার গ্রেডিয়েন্ট দেখানো হয়েছে যা বাম থেকে শুরু হয়। সুতরাং এটি লাল কালারের ৫০% ট্রান্সপারেন্সি দিয়ে শুরু হয়ে হুলদ কালারে রূপান্তর হয়ঃ

kt_satt_skill_example_id=1463

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

সিএসএস(৩) repeating-linear-gradient() ফাংশনটি ব্যবহার করে লিনিয়ার গ্রেডিয়েন্টকে রিপিট করা যায়ঃ

kt_satt_skill_example_id=1465

সিএসএস(৩) রেডিয়াল(Radial) গ্রেডিয়েন্ট

রেডিয়াল গ্রেডিয়েন্ট একটি এলিমেন্টের মাঝ বা কেন্দ্র থেকে শুরু হয়ে ক্রমান্বয়ে সব দিকে ছড়িয়ে পড়ে।

একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করার জন্য আপনাকে কমপক্ষে দুটি কালার স্টপ অবশ্যই নির্ধারণ করতে হবে।

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

background: radial-gradient(নির্দিষ্ট পজিশনে গ্রেডিয়েন্ট এর আকৃতি, শুরুর কালার, ..., শেষ কালার); 

রেডিয়াল গ্রেডিয়েন্টের ডিফল্ট আকার উপবৃত্ত, সাইজ দূরবর্তী-কর্ণার(farthest-corner) এবং পজিশন center এ থাকে।

রেডিয়াল গ্রেডিয়েন্টে একটি কালার থেকে অন্য একটি কালারের ব্যবধান ডিফল্টভাবে সমান হয়।

kt_satt_skill_example_id=1470

রেডিয়াল গ্রেডিয়েন্টের আকার(shape) নির্ধারণ

রেডিয়াল গ্রেডিয়েন্টের প্রথম প্যারামিটারটি এর আকার নির্ধারণ করে। এটি circle অথবা ellipse হতে পারে। তবে ellipse হচ্ছে ডিফল্ট ভ্যালু।

নিম্নের উদাহরণে আমরা উপবৃত্ত(ellipse) এবং বৃত্ত(circle) আকারের দুটি রেডিয়াল গ্রেডিয়েন্ট দেখবোঃ

kt_satt_skill_example_id=1475

রেডিয়াল গ্রেডিয়েন্টের অবস্থান নির্ধারণ

রেডিয়াল গ্রেডিয়েন্টের অবস্থান নির্ধারণের জন্য আমরা চারটি কীওয়ার্ড এর মধ্য থেকে যেকোনো একটি ব্যবহার করতে পারি। এই চারটি কীওয়ার্ড রেডিয়াল গ্রেডিয়েন্টের চার ধরনের অবস্থান নির্ধারণ করে। নিম্নে এই চারটি কীওয়ার্ড দেওয়া হলোঃ

kt_satt_skill_example_id=1478

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

সিএসএস(৩) repeating-radial-gradient() ফাংশন ব্যবহার করে আপনি রেডিয়াল গ্রেডিয়েন্টকে রিপিট করতে পারেনঃ

kt_satt_skill_example_id=1481

ব্রাউজার সাপোর্ট