গ্রেডিয়েন্ট সাধারণত একটি ওয়েব পেজকে আরও সুন্দর এবং আকর্ষণীয় बनाने জন্য ব্যবহৃত হয়। একটি বক্সকে সাদা রঙ দিয়ে স্টাইল করার বদলে, গ্রেডিয়েন্ট আপনাকে দুটি বা তার অধিক রঙের মধ্যে ট্রানজিশন দেখাতে দেয়, যা দৃষ্টিগতভাবে আরও আকর্ষণীয় এবং চোখ ধরা।
সিএসএসে গ্রেডিয়েন্ট নিয়ে কাজ করার জন্য আপনি দুটি প্রপার্টি ব্যবহার করতে পারেন: linear-gradient এবং radial-gradient। এই প্রপার্টিগুলো যথাক্রমে লিনিয়ার এবং রেডিয়াল গ্রেডিয়েন্ট তৈরি করতে দেয়।
এই টিউটোরিয়ালে কিছু উদাহরণের মাধ্যমে সিএসএসে লিনিয়ার এবং রেডিয়াল গ্রেডিয়েন্ট কীভাবে তৈরি করবেন সে সম্পর্কে আলোচনা করা হবে। এই টিউটোরিয়াল শেষ হলে আপনি সিএসএস গ্রেডিয়েন্ট তৈরি করার এক্সপার্ট হয়ে যাবেন।
সিএসএস গ্রেডিয়েন্ট
ডিজাইনে, গ্রেডিয়েন্ট হলো দুটি বা তার অধিক রঙের মধ্যে ট্রানজিশন। গ্রেডিয়েন্ট সাধারণ ট্রানজিশন হতে পারে, কিন্তু এতে কোণ, একাধিক রঙ এবং বিস্তৃত পরিসরে স্টাইলিং করা যেতে পারে।
সিএসএসে দুটি ধরনের গ্রেডিয়েন্ট সমর্থিত। এগুলো হলো:
- লিনিয়ার গ্রেডিয়েন্ট
- রেডিয়াল গ্রেডিয়েন্ট
লিনিয়ার গ্রেডিয়েন্ট উপরে থেকে নিচে বা বাম থেকে ডানে দুটি বা তার অধিক রঙের মধ্যে ট্রানজিশন তৈরি করে। রেডিয়াল গ্রেডিয়েন্ট হলো একটি উৎস বিন্দু থেকে বিকীর্ণ হওয়া রঙ ট্রানজিশন, যেমন একটি আকৃতি।
সিএসএসে, গ্রেডিয়েন্ট background সিএসএস প্রপার্টি ব্যবহার করে ডিফাইন করা হয়। এই প্রপার্টিটি একটি ওয়েব এলিমেন্টের জন্য ব্যাকগ্রাউন্ড তৈরি করতে ব্যবহৃত হয় এবং সিএসএস ব্যাকগ্রাউন্ড প্রপার্টিগুলোর শর্টহ্যান্ড, যার মধ্যে রয়েছে background-color এবং background-image।
background প্রপার্টি ব্যবহারের সিন্ট্যাক্স নিচে দেওয়া হলো:
background: typeOfBackground;
এখন আমরা সিএসএসে গ্রেডিয়েন্ট তৈরি করা শুরু করতে পারি। লিনিয়ার গ্রেডিয়েন্ট নিয়ে আলোচনা শুরু করি।
সিএসএস লিনিয়ার গ্রেডিয়েন্ট
লিনিয়ার গ্রেডিয়েন্ট হলো একটি সরল রেখার সাথে দুটি বা তার অধিক রঙের মধ্যে ট্রানজিশন।
উদাহরণস্বরূপ, একটি লিনিয়ার গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড উপরে থেকে নিচে, বাম থেকে ডানে, বা বtml-লেফট থেকে টপ-রাইট কোণ পর্যন্ত দেখতে পারে। ডিফল্টভাবে একটি গ্রেডিয়েন্ট উপরে থেকে নিচে প্রদর্শিত হয়, কিন্তু আপনি আপনার গ্রেডিয়েন্টের জন্য একটি কাস্টম ডাইরেকশন নির্দিষ্ট করতে পারেন।
লিনিয়ার গ্রেডিয়েন্টের কালার স্টপ থাকে, যেগুলো হলো আপনার ট্রানজিশনে অন্তর্ভুক্ত করতে চাইতে রঙগুলো। লিনিয়ার গ্রেডিয়েন্টে আপনি কতগুলো রঙ নির্দিষ্ট করবেন তার কোনো সীমা নেই।
সিএসএসে লিনিয়ার গ্রেডিয়েন্ট ফাংশনের সিন্ট্যাক্স:
background: linear-gradient (direction, color1, color2 ...);
এই সিন্ট্যাক্সে, direction গ্রেডিয়েন্টের দিক নির্দেশ করে, এবং color1, color2 ইত্যাদি আমাদের গ্রেডিয়েন্টের কালার স্টপ নির্দেশ করে।
চলুন সিএসএসে লিনিয়ার গ্রেডিয়েন্টের কিছু উদাহরণ দেখি।
টপ-টু-বটম গ্রেডিয়েন্ট
মান লেইয়া আমরা একটি বক্সের উপরে থেকে নিচে প্রদর্শিত হওয়া একটি গ্রেডিয়েন্ট তৈরি করতে চাই। এটি linear-gradient() প্রপার্টি দিয়ে তৈরি হওয়া ডিফল্ট গ্রেডিয়েন্ট।
আমাদের গ্রেডিয়েন্টটি #00C9FF (হলকা নীল) রঙ থেকে শুরু হয়ে #92FE9D (হলকা সবুজ) রঙে শেষ হবে। এখানে কোডটি দেওয়া হলো:
.gradient { background: linear-gradient(#00C9FF, #92FE9D); }
আমাদের কোড নিচের আউটপুট দেবে:
লেফট-টু-রাইট গ্রেডিয়েন্ট
অন্যদিকে, আমরা বাম থেকে ডানে রঙ ট্রানজিশন দেখানোর জন্য একটি গ্রেডিয়েন্ট তৈরি করতে চাইতে পারি। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
.gradient { background: linear-gradient(to right, #00C9FF, #92FE9D); }
আমাদের কোড নিচের আউটপুট দেবে:
আমাদের গ্রেডিয়েন্ট আমাদের দুটি রঙের মাঝপথে বাম থেকে ডানে ট্রানজিশন হয়। এই ট্রানজিশন ঘটে কারণ আমরা আমাদের গ্রেডিয়েন্টের ডাইরেকশন হিসেবে to right নির্দিষ্ট করেছি। বিকল্পভাবে, যদি আমরা আমাদের গ্রেডিয়েন্টকে ডান থেকে বামে দেখাতে চাইতাম, তবে আমরা কোডে to right এর বদলে to left ব্যবহার করতাম।
ডায়াগোনাল গ্রেডিয়েন্ট
আপনি linear-gradient() প্রপার্টি ব্যবহার করে গ্রেডিয়েন্টের হরিজন্টাল এবং ভার্টিকাল স্ট্রাটিং পয়েন্ট নির্দিষ্ট করে ডায়াগোনাল গ্রেডিয়েন্ট তৈরি করতে পারেন।
যদি আপনি বটম-রাইট দিকে ট্রানজিশন হওয়া একটি গ্রেডিয়েন্ট তৈরি করতে চান, তবে আপনি to bottom right আপনার গ্রেডিয়েন্ট হিসেবে নির্দিষ্ট করতে পারেন। অথবা যদি আপনি টপ-লেফট দিকে ট্রানজিশন হওয়া একটি গ্রেডিয়েন্ট চান, তবে আপনি to top left আপনার গ্রেডিয়েন্ট হিসেবে ব্যবহার করতে পারেন।
মান লেইয়া আমরা আমাদের বক্সের টপ-রাইট দিকে ট্রানজিশন হওয়া একটি গ্রেডিয়েন্ট তৈরি করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
.gradient { background: linear-gradient(to top right, #00C9FF, #92FE9D); }
আমাদের কোড নিচের আউটপুট দেবে:
আমাদের গ্রেডিয়েন্ট বtml-লেফটে হলকা নীল রঙ দিয়ে শুরু হয়ে বক্সের টপ-রাইটে সবুজ রঙে ট্রানজিশন হয়।
কালার স্টপস
আমাদের গ্রেডিয়েন্টগুলো এখন পর্যন্ত শুধু দুটি রঙের মধ্যে ট্রানজিশন করেছে। যাইহোক, আপনি দুটির চেয়ে বেশি রঙ নির্দিষ্ট করতে পারেন যদি আপনি একাধিক রঙের মধ্যে ট্রানজিশন করে আরও জটিল একটি গ্রেডিয়েন্ট তৈরি করতে চান।
মান লেইয়া আমরা #00D2FF (হলকা নীল) থেকে #92FE9D (হলকা সবুজ), তারপর #3A47D5 (গाढ় নীল) পর্যন্ত ট্রানজিশন হওয়া একটি গ্রেডিয়েন্ট তৈরি করতে চাই। এই ট্রানজিশন বাম থেকে ডানে ঘটবে। আমরা নিচের কোড ব্যবহার করে এই গ্রেডিয়েন্টটি তৈরি করতে পারি:
.gradient { background: linear-gradient(to right, #00D2FF, #00C9FF, #3A47D5); }
আমাদের কোড নিচের আউটপুট দেবে:
এই উদাহরণে, আমাদের গ্রেডিয়েন্ট বাম থেকে ডানে তিনটি ভিন্ন রঙের মধ্যে ট্রানজিশন করে।
কোণ (Angles)
আমাদের আগের উদাহরণগুলোতে, আমরা প্রিডিফাইন্ড ডাইরেকশন (যেমন টপ-রাইট থেকে বtml-লেফট) ব্যবহার করে আমাদের গ্রেডিয়েন্ট তৈরি করেছি। যদি আমরা আমাদের গ্রেডিয়েন্ট কীভাবে প্রদর্শিত হবে সেটির উপর আরও নিয়ন্ত্রণ চাই, তবে আমরা কাস্টম কোণ ব্যবহার করতে পারি।
কোণগুলি একটি লিনিয়ার গ্রেডিয়েন্টে প্রথম মান হিসেবে নির্দিষ্ট করা উচিত, সেখানে যেখানে আপনি একটি ডাইরেকশন নির্দিষ্ট করবেন।
মান লেইয়া আপনি #00C9FF এবং #92FE9D এর মধ্যে ১২০-ডিগ্রি কোণে একটি ট্রানজিশন তৈরি করতে চান। আপনি নিচের কোড ব্যবহার করে এটি করতে পারেন:
.gradient { background: linear-gradient(120deg, #00C9FF, #92FE9D); }
আমাদের কোড নিচের আউটপুট দেবে:
আমাদের উদাহরণে, আমরা একটি গ্রেডিয়েন্ট নির্দিষ্ট করেছি যা বাম থেকে ডানে ১২০ ডিগ্রি কোণে নীল এবং সবুজের মধ্যে ট্রানজিশন করে। যদি আমরা ৪০ ডিগ্রি কোণে ট্রানজিশন হওয়া একটি গ্রেডিয়েন্ট তৈরি করতে চাই, তবে আমরা 40deg আমাদের কোণ হিসেবে নির্দিষ্ট করতে পারি।
ট্রান্সপারেন্ট গ্রেডিয়েন্ট
সিএসএস গ্রেডিয়েন্টকে আরজিবিএ (RGBA) রঙ ব্যবহার করে কম বা বেশি ট্রান্সপারেন্ট बनানো যায়।
RGBA রঙ RGB (লাল, সবুজ, নীল) পদ্ধতি ব্যবহার করে রঙ উপস্থাপন করে। যাইহোক, RGBA রঙে একটি অতিরিক্ত প্যারামিটার থাকে যাকে আলফা (alpha) বলা হয় যা একটি রঙের ট্রান্সপারেন্সি ডিফাইন করে। আলফা প্যারামিটারের মান ০ এবং ১ এর মধ্যে হওয়া উচিত (মান যত কম, রঙটি তত বেশি ট্রান্সপারেন্ট দেখাবে)।
মান লেইয়া আমরা #00C9FF এবং #92FE9D রঙের মাঝপথে বাম থেকে ডানে একটি গ্রেডিয়েন্ট তৈরি করতে চাই। আমাদের প্রথম রঙটি ৫০% ট্রান্সপারেন্ট থেকে শুরু হবে, এবং শেষ রঙটি ৩০% ট্রান্সপারেন্ট হবে। আমরা নিচের কোড ব্যবহার করে এই গ্রেডিয়েন্টটি তৈরি করতে পারি:
.gradient { background: linear-gradient(to right, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7)); }
আমাদের কোড নিচের আউটপুট দেবে:
আমাদের আগের গ্রেডিয়েন্টের সাথে তুলনা করলে, আমরা দেখতে পাচ্ছি আমাদের রঙগুলো আরও ট্রান্সপারেন্ট। এই উদাহরণে, আমরা হেক্স ভ্যালুর বদলে RGBA ভ্যালু ব্যবহার করে আমাদের রঙ নির্দিষ্ট করেছি।
আমরা আমাদের প্রথম রঙ (নীল) এর জন্য ০.৫ আলফা ভ্যালু নির্দিষ্ট করেছি, যা রঙটি ৫০% ট্রান্সপারেন্ট করে। আমরা আমাদের দ্বিতীয় রঙ (সবুজ) এর জন্য ০.৩ আলফা ভ্যালু নির্দিষ্ট করেছি, যা রঙটি ৭০% ট্রান্সপারেন্ট করে (মনে রাখবেন, আলফা ভ্যালু যত কম, রঙটি তত বেশি ট্রান্সপারেন্ট দেখাবে)।
হার্ড লাইনস
সাধারণত, যখন আপনি একটি গ্রেডিয়েন্ট তৈরি করেন, তবে আপনি আপনার গ্রেডিয়েন্টের রঙগুলোর মাঝপথে মসৃণ এবং ক্রমাগত ট্রানজিশন চান। যাইহোক, যদি আপনি একটি গ্রেডিয়েন্ট লাইন তৈরি করতে চান যা গ্রেডিয়েন্টে দুটি রঙকে আলাদা করে, তবে আপনি একটি হার্ড লাইন নির্দিষ্ট করে এটি করতে পারেন।
একটি হার্ড লাইন নির্দিষ্ট করতে আপনাকে নিচের সিন্ট্যাক্স ব্যবহার করতে হবে:
linear-gradient(direction, hard-line, colors);
সুতরাং, যদি আপনি একটি ব্ল্যাক এবং গ্রিন গ্রেডিয়েন্টের মাঝপথে একটি হার্ড লাইন চান, তবে আপনি black 50%, green 50% हार্ড লাইন হিসেবে ব্যবহার করতে পারেন। অথবা যদি আপনি একটি ব্লিউ এবং পিংক গ্রেডিয়েন্টের ৭০% পয়েন্টে একটি হার্ড লাইন চান, তবে আপনি blue 70%, pink 30% হার্ড লাইন হিসেবে ব্যবহার করতে পারেন।
এখানে একটি গ্রেডিয়েন্টের উদাহরণ দেওয়া হলো যার মাঝপথে একটি ব্ল্যাক হার্ড লাইন রয়েছে:
.gradient { background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%); }
আমাদের কোড নিচের আউটপুট দেবে:
এই ছবিতে আপনি দেখতে পাচ্ছেন যে, আমাদের গ্রেডিয়েন্টের মাঝপথে একটি হার্ড স্টপ পজিশন তৈরি হয়েছে।
সিএসএস রেডিয়াল গ্রেডিয়েন্ট
রেডিয়াল গ্রেডিয়েন্ট হলো একটি উৎস বিন্দু থেকে বিকীর্ণ হওয়া দুটি বা তার অধিক রঙের মধ্যে ট্রানজিশন। একটি লিনিয়ার গ্রেডিয়েন্টের উৎস বিন্দু হয় একটি এলিপস বা একটি সার্কেল।
একটি রেডিয়াল গ্রেডিয়েন্টে অন্তত দুটি কালার স্টপ থাকতে হবে, এবং আপনার গ্রেডিয়েন্টে কতগুলো কালার স্টপ থাকবে তার কোনো সীমা নেই। রেডিয়াল গ্রেডিয়েন্টের সিন্ট্যাক্স:
background: radial-gradient(shape size position, start color, next colors …, final color);
এই সিন্ট্যাক্সটি ভেঙে দেখা যাক:
- shape হলো রেডিয়াল অবজেক্টের আকার (ডিফল্টভাবে এটি একটি এলিপস)।
- size হলো আপনার রেডিয়াল অবজেক্টের আকারের সাইজ (ডিফল্টভাবে এটি farthest-corner)।
- at position হলো রেডিয়াল অবজেক্টের পজিশন (ডিফল্টভাবে এটি center)।
- start color হলো গ্রেডিয়েন্টের প্রথম রঙ।
- next colors … হলো শুরু এবং শেষ রঙের মাঝপথের রঙগুলো।
- final color হলো গ্রেডিয়েন্টের শেষ রঙ।
এখন আমরা সিএসএসে রেডিয়াল গ্রেডিয়েন্ট তৈরি করার সিন্ট্যাক্স জানি, আমরা কিছু উদাহরণ দেখতে পারি।
ডিফল্ট রেডিয়াল গ্রেডিয়েন্ট
মান লেইয়া আমরা একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করতে চাই যা একটি এলিপস এবং #4B6CB7 এবং #D9E7FF রঙের মধ্যে ট্রানজিশন করে। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
.gradient { background: radial-gradient(#4B6CB7, #D9E7FF); }
আমাদের কোড নিচের আউটপুট দেবে:
আমাদের উদাহরণে, আমরা দুটি রঙ এবং গ্রেডিয়েন্টের ডিফল্ট মানগুলো ব্যবহার করে একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করেছি। যেহেতু আমরা ডিফল্ট মানগুলো ব্যবহার করেছি, আমাদের গ্রেডিয়েন্ট সমানভাবে স্পেসড, আমাদের রেডিয়াল অবজেক্টের পজিশন বক্সের কেন্দ্রে, এবং আমাদের রেডিয়াল অবজেক্ট একটি এলিপস।
বিভিন্ন কালার স্টপস
রেডিয়াল গ্রেডিয়েন্ট নিয়ে কাজ করার সময়, আপনি আপনার নিজস্ব কালার স্টপস নির্দিষ্ট করতে পারেন। এর মানে হলো আপনার গ্রেডিয়েন্টে বিভিন্ন রঙের মধ্যে ট্রানজিশন ডিফল্ট স্মুথ ট্রানজিশন অনুযায়ী না হয়ে গ্রেডিয়েন্টে একটি নির্দিষ্ট পজিশনে হবে।
মান লেইয়া আমরা একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করতে চাই যা #4B6CB7 থেকে #D9E7FF থেকে #9198E5-এ ট্রানজিশন করে। প্রথম রঙটি গ্রেডিয়েন্টের ২৫% কভার করবে, মাঝের রঙটি ৫০% কভার করবে, এবং শেষ রঙটি ২৫% কভার করবে।
আমরা নিচের কোড ব্যবহার করে এই গ্রেডিয়েন্টটি তৈরি করতে পারি:
.gradient { background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%); }
আমাদের কোড নিচের আউটপুট দেবে:
আমাদের গ্রেডিয়েন্ট আমাদের কোডে নির্দিষ্ট পয়েন্টগুলোর মধ্যে তিনটি রঙের মধ্যে ট্রানজিশন করে। এই ইফেক্ট পেতে, আমরা প্রথমে আমাদের গ্রেডিয়েন্টে অন্তর্ভুক্ত করতে চাইতে রঙটি নির্দিষ্ট করেছি, তারপর সেই রঙটি গ্রেডিয়েন্টের কতটুকু কভার করবে সেটি নির্দিষ্ট করেছি। তাই, উদাহরণস্বরূপ, আমাদের মাঝের রঙ, #D9E7FF, আমাদের গ্রেডিয়েন্টের ৫০% দখল করে।
বিভিন্ন আকার (Shapes)
ডিফল্টভাবে, একটি রেডিয়াল গ্রেডিয়েন্টের জন্য সেট করা আকার হলো একটি এলিপস। যাইহোক, আপনি আপনার গ্রেডিয়েন্টকে একটি সার্কেলও बना পারেন। আপনি আপনার গ্রেডিয়েন্টের জন্য শেপ ভ্যালু circle নির্দিষ্ট করে এটি করতে পারেন।
মান লেইয়া আপনি #4B6CB7 এবং #D9E7FF রঙের মধ্যে ট্রানজিশন হওয়া একটি গ্রেডিয়েন্ট তৈরি করতে চান। আপনার রেডিয়াল গ্রেডিয়েন্টের কেন্দ্র বিন্দুটি একটি সার্কেল হবে। আপনি নিচের কোড ব্যবহার করে এই গ্রেডিয়েন্টটি তৈরি করতে পারেন:
.gradient { background: radial-gradient(circle, #4B6CB7, #D9E7FF); }
আমাদের কোড নিচের আউটপুট দেবে:
আমাদের উদাহরণে, আমরা #4B6CB7 এবং #D9E7FF রঙের মধ্যে একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করেছি। আমাদের রেডিয়াল গ্রেডিয়েন্টের কেন্দ্র বিন্দুটি একটি এলিপসের বদলে একটি সার্কেল।
রেডিয়াল গ্রেডিয়েন্ট পজিশন
একটি রেডিয়াল গ্রেডিয়েন্টের কেন্দ্র অবজেক্টের পজিশন পরিবর্তন করা যায়। একটি রেডিয়াল গ্রেডিয়েন্টের কেন্দ্র অবজেক্টের পজিশন নির্ধারণ করার জন্য চারটি কীওয়ার্ড ব্যবহার করা হয়। এগুলো হলো:
- closest-corner
- farthest-corner
- closest-side
- farthest-side
মান লেইয়া আমরা একটি সার্কুলার রেডিয়াল গ্রেডিয়েন্ট তৈরি করতে চাই যা ফারথেস্ট কোণে 50px 50px পজিশনে প্রদর্শিত হবে। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
.gradient { background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF); }
আমাদের কোড নিচের আউটপুট দেবে:
এই উদাহরণে, আমাদের রেডিয়াল গ্রেডিয়েন্টের কেন্দ্র বিন্দু ফারথেস্ট কোণে 50px 50px পজিশনে প্রদর্শিত হচ্ছে। আপনি দেখতে পাচ্ছেন যে আমাদের কেন্দ্র বিন্দু টপ-লেফট কোণে আছে, যা দেখায় যে আমাদের গ্রেডিয়েন্ট ইচ্ছামতো কাজ করছে। তারপর, আমাদের গ্রেডিয়েন্ট আউটওয়ার্ডে আমাদের কোডে নির্দিষ্ট পরবর্তী রঙের দিকে ট্রানজিশন করে।
উপসংহার
গ্রেডিয়েন্ট সিএসএসে দুটি বা তার অধিক রঙের মধ্যে ট্রানজিশন তৈরি করতে ব্যবহৃত হয়। সিএসএসে ব্যবহৃত দুটি প্রধান গ্রেডিয়েন্ট হলো লিনিয়ার গ্রেডিয়েন্ট এবং রেডিয়াল গ্রেডিয়েন্ট।
এই টিউটোরিয়ালে উদাহরণের মাধ্যমে লিনিয়ার এবং রেডিয়াল গ্রেডিয়েন্ট সিএসএসে কীভাবে তৈরি করবেন এবং প্রতিটি গ্রেডিয়েন্ট টাইপের দ্বারা অফার করা বিভিন্ন অ্যাট্রিবিউট ব্যবহার করে সেগুলো কীভাবে কাস্টমাইজ করবেন সে সম্পর্কে আলোচনা করা হয়েছে। এখন আপনি সিএসএস গ্রেডিয়েন্টের সাথে এক্সপার্টের মতো কাজ করার জ্ঞান অর্জন করেছেন!