সিএসএস(৩) গ্রেডিয়েন্ট
সিএসএস(৩) গ্রেডিয়েন্ট দুই বা ততোধিক কালারের মধ্যে প্রগতিশীল পরিবর্তন(transition) সাধন এর মাধ্যমে একটি ইমেজ তৈরি করে। সুতরাং আপনি গ্রেডিয়েন্ট ব্যবহার করে একাধিক কালারের মিশ্রণে একটি এলিমেন্ট এর ব্যাকগ্রাউন্ড কালার সেট করতে পারবেন।
সিএসএস(৩) আসার পূর্বে গ্রেডিয়েন্ট তৈরি করার জন্য ইমেজ ব্যবহার করা হতো। যাইহোক, বর্তমানে আপনি সিএসএস(৩) গ্রেডিয়েন্ট ব্যবহার করে সময় এবং ব্যান্ডউইডথ উভয়ই সাশ্রয় করতে পারবেন।
এছাড়া আপনি যদি ইমেজ ব্যবহার করে গ্রেডিয়েন্ট তৈরি করেন তাহলে পেজ zoom করা হলে ইমেজ এর কালার খারাপ দেখাতে পারে। কিন্তু একই কাজ আপনি যদি গ্রেডিয়েন্ট ব্যবহার করে করেন তাহলে কালার একই থাকবে এবং ব্যাকগ্রাউন্ডও অনেক চমৎকার দেখাবে। কারণ গ্রেডিয়েন্ট ব্রাউজার কর্তৃক সৃষ্টি হয়।
সিএসএস(৩) তে দুই ধরনের গ্রেডিয়েন্ট রয়েছেঃ
সিএসএস(৩) লিনিয়ার গ্রেডিয়েন্ট
সিএসএস(৩) linear-gradient() ফাংশন এমন একটি চিত্র তৈরি করে যা একটি সরল রেখা বরাবর দুই বা ততোধিক রং এর মধ্যে একটি প্রগতিশীল পরিবর্তন(transition) সৃষ্টি করে।
লিনিয়ার গ্রেডিয়েন্ট তৈরির জন্য আপনাকে কমপক্ষে দুটি কালার সিলেক্ট করতে হবে। কালার গুলোর সুষম ট্রানজিশনের মাধ্যমে গ্রেডিয়েন্ট তৈরি হয়।
লিনিয়ার গ্রেডিয়েন্টের গঠন
background: linear-gradient(দিক, প্রথম কালার, দ্বিতীয় কালার, ...);
গঠন এর ভ্যালুসমূহের ব্যাখ্যা
- দিক - এটি দুই বা ততোধিক কালার এর পরিবর্তন(transition) এর দিক নির্ধারণ করে। যেমন- উপর থেকে নিচে, বাম থেকে ডানে, কোণাকুণি ইত্যাদি।
- প্রথম কালার, দ্বিতীয় কালার, ... - এগুলো হলো কালার স্টপ এবং এর ঠিক পরেই শতকরা অথবা দৈর্ঘ্য এককে গ্রেডিয়েন্ট অক্ষের জন্য স্টপ(stop) পজিশন দেওয়া হয়।
লিনিয়ার গ্রেডিয়েন্ট এর উদাহরণ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস লিনিয়ার গ্রেডিয়েন্ট এর উদাহরণ</title>
<style>
/* লিনিয়ার গ্রেডিয়েন্ট - উপর থেকে নিচে */
#div1 {
height: 60px;
background: -webkit-linear-gradient(yellow, red); /* সাফারি ৫.১ থেকে ৬.০ এর জন্য */
background: -o-linear-gradient(yellow, red); /* অপেরা ১১.১ থেকে ১২.০ এর জন্য */
background: -moz-linear-gradient(yellow, red); /* ফায়ারফক্স ৩.৬ থেকে ১৫ এর জন্য */
background: linear-gradient(yellow, red); /* স্ট্যান্ডার্ড সিনট্যাক্স এবং এটি অবশ্যই যুক্ত করতে হবে। */
}
/* লিনিয়ার গ্রেডিয়েন্ট - বাম থেকে ডানে */
#div2 {
height:60px;
background: linear-gradient(to right, yellow , red);
}
/* লিনিয়ার গ্রেডিয়েন্ট - কোণাকুণি */
#div3 {
height: 60px;
background: linear-gradient(to bottom right, yellow, red);
}
</style>
</head>
<body>
<h2> লিনিয়ার গ্রেডিয়েন্ট - উপর থেকে নিচে </h2>
<p>এই লিনিয়ার গ্রেডিয়েন্টটি উপর থেকে শুরু হবে। সুতরাং এটি উপর থেকে হলুদ দিয়ে শুরু হবে এবং নিচে এসে লাল কালার দিয়ে শেষ হবে।</p>
<div id="div1"></div>
<h2> লিনিয়ার গ্রেডিয়েন্ট - বাম থেকে ডানে </h2>
<p> এই লিনিয়ার গ্রেডিয়েন্টটি বাম থেকে শুরু হবে। সুতরাং এটি বাম থেকে হলুদ দিয়ে শুরু হবে এবং ডান পাশে লাল কালার দিয়ে শেষ হবে।</p>
<div id="div2"></div>
<h2>লিনিয়ার গ্রেডিয়েন্ট - কোণাকুণি </h2>
<p> এই লিনিয়ার গ্রেডিয়েন্টটি উপরের বাম কর্ণার থেকে শুরু হবে। সুতরাং এটি হলুদ দিয়ে কোণাকুণি শুরু হবে এবং লাল কালারে শেষ হবে:</p>
<div id="div3"></div>
<p><strong>নোট:</strong> ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্ববর্তী ভার্সনে গ্রেডিয়েন্ট সাপোর্ট করে না। </p>
</body>
</html>
ফলাফল
কোণ এর ব্যবহার
আপনি যদি গ্রেডিয়েন্টের দিক আরো ভালভাবে নিয়ন্ত্রন করতে চান তাহলে পূর্ব নির্ধারিত দিকের পরিবর্তে একটি কোণ নির্ধারণ করুন।
গঠন
background: linear-gradient(কোণ, প্রথম কালার, দ্বিতীয় কালার, ...); এখানে কোণ এর প্রাথমিক ভ্যালু 0deg(top) এবং ধনাত্মক মান বৃদ্ধির সাথে সাথে ঘড়ির কাঁটার দিকে ঘুরে এবং ঋণাত্মক মান বৃদ্ধির সাথে সাথে ঘড়ির কাঁটার বিপরীতে ঘুরে।
আমরা কোণ ব্যবহার করে যেকোনো ধরনের গ্রেডিয়েন্ট তৈরি করতে পারি।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস লিনিয়ার গ্রেডিয়েন্ট এর উদাহরণ</title>
<style>
#div1 {
height: 60px;
background: linear-gradient(45deg, yellow 20%, red);
}
#div2 {
height: 60px;
background: linear-gradient(-45deg,yellow 20%, red);
}
#div3 {
height: 60px;
background: linear-gradient(270deg, yellow 20%, red);
}
</style>
</head>
<body>
<p>বিভিন্ন ধরনের কোণ ব্যবহার করে লিনিয়ার গ্রেডিয়েন্ট তৈরি।</p>
<div id="div1" style="text-align:center;">৪৫ ডিগ্রী কোণে লিনিয়ার গ্রেডিয়েন্টঃ</div><br>
<div id="div2" style="text-align:center;">-৪৫ ডিগ্রী কোণে লিনিয়ার গ্রেডিয়েন্টঃ</div><br>
<div id="div3" style="text-align:center;">২৭০ ডিগ্রী কোণে লিনিয়ার গ্রেডিয়েন্টঃ</div><br>
<p><strong>নোট:</strong> যদি কালার ভ্যালুর জন্য কোন পারসেন্ট নির্দিষ্ট করা না থাকে তাহলে কালার স্টপ স্বয়ংক্রিয়ভাবে সমানভাবে স্থান(evenly spaced) করে নেয়। </p>
</body>
</html>
ফলাফল
একাধিক কালার ব্যবহার করে লিনিয়ার গ্রেডিয়েন্ট তৈরি
নিম্নের উদাহরণে আমরা একাধিক কালার ব্যবহার করে লিনিয়ার লগ্রেডিয়েন্ট তৈরি করবোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস লিনিয়ার গ্রাডিয়েন্ট এর উদাহরণ</title>
<style>
#div1 {
height: 80px;
background: linear-gradient(yellow, red, blue);
}
#div2 {
height:100px;
background: linear-gradient(to right, red, chocolate, yellow, green, orange, blue,indigo, teal, violet);
}
</style>
</head>
<body>
<p> ৩টি কালার স্টপ সমানভাবে স্থান(evenly spaced) নেয়।</p>
<div id="div1"></div>
<p>একাধিক কালার দিয়ে একটি লিনিয়ার গ্রেডিয়েন্ট তৈরিঃ</p>
<div id="div2" style="text-align:center;margin:auto;color:#eee;font-size:30px;font-weight:bolder;font-style:italic;">
গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড
</div>
<p><strong>নোট:</strong> যদি কালার ভ্যালুর জন্য কোন পারসেন্ট নির্দিষ্ট করা না থাকে তাহলে কালার স্টপ স্বয়ংক্রিয়ভাবে সমানভাবে স্থান(evenly spaced) নেয়। </p>
</body>
</html>
ফলাফল
ট্রান্সপারেন্সি(Transparency) ব্যবহার
গ্রেডিয়েন্টে আমরা ট্রান্সপারেন্সি বা স্বচ্ছতা ব্যবহার করতে পারি যা ফেইড(fade) ইফেক্ট তৈরি করতে ব্যবহৃত হয়।
ট্রান্সপারেন্সি যুক্ত করতে হলে আপনাকে কালার নির্ধারণ করার সময় rgba() ফাংশনটি ব্যবহার করতে হবে। rgba() ফাংশনের মধ্যে শেষ প্যারামিটারটির মান ০.০ থেকে ১.০ পর্যন্ত হতে হবে এবং এটি কালারের ট্রান্সপারেন্সি নির্ধারণ করে। যেখানে ০.০ সম্পূর্ণ ট্রান্সপারেন্সি নির্দেশ করে এবং ১.০ সম্পূর্ণ কালার নির্দেশ করে।
নিম্নের উদাহরণে একটি লিনিয়ার গ্রেডিয়েন্ট দেখানো হয়েছে যা বাম থেকে শুরু হয়। সুতরাং এটি লাল কালারের ৫০% ট্রান্সপারেন্সি দিয়ে শুরু হয়ে হুলদ কালারে রূপান্তর হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস লিনিয়ার গ্রেডিয়েন্ট এর উদাহরণ</title>
<style>
#div1 {
height: 70px;
background: linear-gradient(to right, rgba(255,0,0,.5), rgba(255,255,0,1));
}
</style>
</head>
<body>
<h4>ট্রান্সপারেন্সি লিনিয়ার গ্রেডিয়েন্ট </h4>
<div id="div1"></div>
</body>
</html>
ফলাফল
লিনিয়ার গ্রেডিয়েন্ট রিপিট
সিএসএস(৩) repeating-linear-gradient() ফাংশনটি ব্যবহার করে লিনিয়ার গ্রেডিয়েন্টকে রিপিট করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস লিনিয়ার গ্রেডিয়েন্ট এর উদাহরণ</title>
<style>
#div1 {
height: 80px;
background: repeating-linear-gradient(45deg, yellow, red 15%, orange 25%);
}
</style>
</head>
<body>
<h4> লিনিয়ার গ্রেডিয়েন্ট রিপিট</h4>
<div id="div1"></div>
<p> একটি গ্রেডিয়েন্ট ৪৫ ডিগ্রি কোণে রিপিট হবে যা হলুদ দিয়ে শুরু হবে এবং কমলা দিয়ে শেষ হবে।</p>
</body>
</html>
ফলাফল
সিএসএস(৩) রেডিয়াল(Radial) গ্রেডিয়েন্ট
রেডিয়াল গ্রেডিয়েন্ট একটি এলিমেন্টের মাঝ বা কেন্দ্র থেকে শুরু হয়ে ক্রমান্বয়ে সব দিকে ছড়িয়ে পড়ে।
একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করার জন্য আপনাকে কমপক্ষে দুটি কালার স্টপ অবশ্যই নির্ধারণ করতে হবে।
রেডিয়াল গ্রেডিয়েন্টের গঠন
background: radial-gradient(নির্দিষ্ট পজিশনে গ্রেডিয়েন্ট এর আকৃতি, শুরুর কালার, ..., শেষ কালার); রেডিয়াল গ্রেডিয়েন্টের ডিফল্ট আকার উপবৃত্ত, সাইজ দূরবর্তী-কর্ণার(farthest-corner) এবং পজিশন center এ থাকে।
রেডিয়াল গ্রেডিয়েন্টে একটি কালার থেকে অন্য একটি কালারের ব্যবধান ডিফল্টভাবে সমান হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেডিয়াল গ্রেডিয়েন্ট এর উদাহরণ</title>
<style>
/* কালার এর ব্যবধান ডিফল্টভাবে সমান থাকে */
#div1 {
height:100px;
width:100%;
background: radial-gradient(yellow, red, orange);
}
/* বিভিন্ন ব্যবধানের কালার স্টপ */
#div2 {
height:100px;
width:100%;
background: radial-gradient(yellow 5%, red 15%, orange 60%);
}
</style>
</head>
<body>
<h2> রেডিয়াল গ্রেডিয়েন্ট - কালার স্টপ এর ব্যবধান ডিফল্টভাবে সমান হয়।</h2>
<div id="div1">background: radial-gradient(yellow, red, orange);
</div>
<h2> রেডিয়াল গ্রেডিয়েন্ট - বিভিন্ন ব্যবধানের কালার স্টপ।</h2>
<div id="div2">background: radial-gradient(yellow 5%, red 15%, orange 60%);</div>
</body>
</html>
ফলাফল
রেডিয়াল গ্রেডিয়েন্টের আকার(shape) নির্ধারণ
রেডিয়াল গ্রেডিয়েন্টের প্রথম প্যারামিটারটি এর আকার নির্ধারণ করে। এটি circle অথবা ellipse হতে পারে। তবে ellipse হচ্ছে ডিফল্ট ভ্যালু।
নিম্নের উদাহরণে আমরা উপবৃত্ত(ellipse) এবং বৃত্ত(circle) আকারের দুটি রেডিয়াল গ্রেডিয়েন্ট দেখবোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেডিয়াল গ্রেডিয়েন্ট এর উদাহরণ</title>
<style>
#div1 {
height:100px;
width:100%;
background: radial-gradient(yellow, red, orange);
}
#div2 {
height:100px;
width:100%;
background: radial-gradient(circle, yellow, red, orange);
}
</style>
</head>
<body>
<h2>রেডিয়াল গ্রেডিয়েন্টের আকৃতি</h2>
<p>একটি রেডিয়াল গ্রেডিয়েন্ট ডিফল্টভাবে <strong>উপবৃত্তাকার</strong> হয়।</p>
<div id="div1">background: radial-gradient(yellow, red, orange);</div>
<p>একটি <strong>বৃত্তাকার</strong> রেডিয়াল গ্রেডিয়েন্ট</p>
<div id="div2">background: radial-gradient(circle, yellow, red, orange);</div>
</body>
</html>
ফলাফল
রেডিয়াল গ্রেডিয়েন্টের অবস্থান নির্ধারণ
রেডিয়াল গ্রেডিয়েন্টের অবস্থান নির্ধারণের জন্য আমরা চারটি কীওয়ার্ড এর মধ্য থেকে যেকোনো একটি ব্যবহার করতে পারি। এই চারটি কীওয়ার্ড রেডিয়াল গ্রেডিয়েন্টের চার ধরনের অবস্থান নির্ধারণ করে। নিম্নে এই চারটি কীওয়ার্ড দেওয়া হলোঃ
| closest-side | farthest-side | closest-corner | farthest-corner |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
height:100px;
width: 250px;
background: radial-gradient(closest-side at 50% 50%, yellow, red, orange);
}
#div2 {
height:100px;
width:250px;
background: radial-gradient(farthest-side at 50% 50%, yellow, red, orange);
}
#div3 {
height:100px;
width:250px;
background: radial-gradient(closest-corner at 50% 50%, yellow, red, orange);
}
#div4 {
height:100px;
width: 250px;
background: radial-gradient(farthest-corner at 50% 50%, yellow, red, orange);
}
</style>
<title>সিএসএসের উদাহরণ</title>
</head>
<body>
<p> রেডিয়াল গ্রেডিয়েন্ট - বিভিন্ন size এর ব্যবহার </p>
<p><strong>closest-side:</strong></p>
<div id="div1">background: radial-gradient(farthest-side at 50% 50%, yellow, red, orange);</div>
<p><strong>farthest-side:</strong></p>
<div id="div2">background: radial-gradient(farthest-side at 50% 50%, yellow, red, orange);</div>
<p><strong>closest-corner:</strong></p>
<div id="div3">background: radial-gradient(closest-corner at 50% 50%, yellow, red, orange);</div>
<p><strong>farthest-corner (এটি ডিফল্ট):</strong></p>
<div id="div4">background: radial-gradient(farthest-corner at 50% 50%, yellow, red, orange);</div>
<p><strong>নোট:</strong> ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্ববর্তী ভার্সনে গ্রেডিয়েন্ট সাপোর্ট করে না। </p>
</body>
</html>
ফলাফল
রেডিয়াল গ্রেডিয়েন্ট রিপিট
সিএসএস(৩) repeating-radial-gradient() ফাংশন ব্যবহার করে আপনি রেডিয়াল গ্রেডিয়েন্টকে রিপিট করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেডিয়াল গ্রেডিয়েন্ট এর উদাহরণ</title>
<style>
#div1 {
height:100px;
width:350px;
background: repeating-radial-gradient(yellow, red 15%,orange 25%);
</style>
</head>
<body>
<p>রেডিয়াল গ্রেডিয়েন্ট রিপিট </p>
<div id="div1">background: repeating-radial-gradient(yellow, red 15%,orange 25%);
</div>
</body>
</html>
ফলাফল
ব্রাউজার সাপোর্ট
| প্রোপার্টি | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |