সিএসএস৩ গ্রাডিয়েন্ট - Css3 Ggadiets



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

সিএসএস ৩ এর পূর্বে গ্রেডিয়েন্ট তৈরি করার জন্য ইমেজ ব্যবহার করা হত। বর্তমানে সিএসএস ৩ এর গ্রেডিয়েন্ট প্রপার্টি ব্যবহার করার ফলে সময় এবং ব্যান্ডউইডথ দুটিই সাশ্রয় হয়। এছাড়াও যদি ইমেজ ব্যবহার করে গ্রেডিয়েন্ট তৈরি করা হয় তবে পেজ zoom করা হলে ব্যাকগ্রাউন্ড খারাপ দেখাতে পারে। কিন্তু একই কাজ যদি গ্রেডিয়েন্ট প্রপার্টি ব্যবহার করে করা হয় তবে রঙ একই থাকবে এবং ব্যাকগ্রাউন্ডও অনেক ভাল দেখাবে। কারণ সিএসএস ৩ এর গ্রেডিয়েন্ট ব্রাউজারে কোডের মাধ্যমে তৈরি হয়।

সিএসএস ৩ এ দুই ধরনের গ্রেডিয়েন্ট রয়েছে। এগুলো হল -

লিনিয়ার গ্রেডিয়েন্ট বা Linear Gradient এবং
রেডিয়াল গ্রেডিয়েন্ট বা Radial Gradient.


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

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

সিনট্যাক্স

background: linear-gradient(direction, color-stop1, color-stop2, ...);


ওপরের সিনট্যাক্সের বর্ণনা দেখুন।

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

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

উদাহরণ

#example-div1{
height: 100px;
background: linear-gradient(teal, blue);
}
#example-div2{
height:100px;
background: linear-gradient(to right, teal , blue);
}
#example-div3{
height: 100px;
background: linear-gradient(to bottom right, teal, blue);
}


নোট - ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্ববর্তী ভার্সনে গ্রেডিয়েন্ট সাপোর্ট করে না।


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

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

সিনট্যাক্স

background: linear-gradient(angle, color-stop1, color-stop2);


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

উদাহরণ

#example-div1{
height: 100px;
background: linear-gradient(45deg, blue 20%, teal);
}
#example-div2{
height: 100px;
background: linear-gradient(-45deg,blue 20%, teal);
}
#example-div3{
height: 100px;
background: linear-gradient(270deg, blue 20%, teal);
}


নোট - যদি কালার ভ্যালুর জন্য কোন শতকরা নির্দিষ্ট করা না থাকে তাহলে কালার স্টপ স্বয়ংক্রিয়ভাবে সমানভাবে স্থান বা evenly spaced করে নেয়।


একাধিক রঙের ব্যবহার

একাধিক রঙ ব্যবহার করে লিনিয়ার গ্রেডিয়েন্ট তৈরি করা যায়। এখানে বিভিন্ন কালার স্টপগুলো সমানভাবে স্থান বা evenly spaced নেয়। নিচের উদাহরণে একাধিক কালার ব্যবহার করে লিনিয়ার গ্রেডিয়েন্ট তৈরি দেখুন।

উদাহরণ

#example-div1{
height: 100px;
background: linear-gradient(yellow, red, orange);
}
#example-div2{
height:100px;
background: linear-gradient(to right, red, yellow, orange, blue,indigo, teal, violet);
}


নোট - যদি কালার ভ্যালুর জন্য কোন শতকরা নির্দিষ্ট করা না থাকে তাহলে কালার স্টপ স্বয়ংক্রিয়ভাবে সমানভাবে স্থান বা evenly spaced করে নেয়।


Transparency ব্যবহার

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

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

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

উদাহরণ

#example-div1{
height: 100px;
background: linear-gradient(to right, rgba(255,0,0,.5), rgba(255,0,255,1));
}




repeating-linear-gradient()

সিএসএস ৩ এর repeating-linear-gradient() প্রপার্টি ব্যবহার করে লিনিয়ার গ্রেডিয়েন্টকে রিপিট করা যায়। নিচে একটি উদাহরণ দেখুন যেখানে একটি গ্রেডিয়েন্ট ৪৫ ডিগ্রি কোণে রিপিট হবে যা নীল রঙ দিয়ে শুরু হবে এবং বেগুনী রঙ দিয়ে শেষ হবে।

উদাহরণ

#example-div1{
height: 80px;
background: repeating-linear-gradient(45deg, blue, red 15%, violate 25%);
}




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

রেডিয়াল গ্রেডিয়েন্ট একটি এলিমেন্টের মাঝ বা কেন্দ্র থেকে শুরু হয়ে ক্রমান্বয়ে সব দিকে ছড়িয়ে পড়ে। কোন রেডিয়াল গ্রেডিয়েন্ট তৈরি করার জন্য কমপক্ষে দুটি কালার স্টপ অবশ্যই নির্ধারণ করতে হয়। রেডিয়াল গ্রেডিয়েন্টের ডিফল্ট আকার হল উপবৃত্তাকার, এর সাইজ হল দূরবর্তী-কর্ণার বা farthest-corner এবং পজিশন center এ থাকে। রেডিয়াল গ্রেডিয়েন্টে একটি রঙ থেকে অন্য একটি রঙের ব্যবধান ডিফল্টভাবে সমান হয়।

নিচে রেডিয়াল গ্রেডিয়েন্টের সিনট্যাক্স দেখুন।

সিনট্যাক্স

background: radial-gradient(shape size at position, start-color, ..., last-color);



নিচে রেডিয়াল গ্রেডিয়েন্টের উদাহরণ দেখুন।

উদাহরণ

#div1 { height:100px; width:100%; background: radial-gradient(blue, violate, teal); }




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

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

উদাহরণ

#ellipse{
height:100px;
width:100%;
background: radial-gradient(blue, violate, teal);
}
#circle{
height:100px;
width:100%;
background: radial-gradient(circle, blue, violate, teal);
}


নোট - কোন রেডিয়াল গ্রেডিয়েন্ট ডিফল্টভাবে উপবৃত্তাকার বা ellipse আকারের হয়।


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

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

closest-side
farthest-side
closest-corner
farthest-corner

নিচে একটি উদাহরণ দেখুন যেখানে এই কীওয়ার্ডগুলো ব্যবহার করে রেডিয়াল গ্রেডিয়েন্টের বিভিন্ন size নির্ধারণ করা হয়েছে।

উদাহরণ

#closest-side{
height:100px;
width: 250px;
background: radial-gradient(closest-side at 50% 50%, blue, violate, teal);
}
#farthest-side{
height:100px;
width:250px;
background: radial-gradient(farthest-side at 50% 50%, blue, violate, teal);
}
#closest-corner{
height:100px;
width:250px;
background: radial-gradient(closest-corner at 50% 50%, blue, violate, teal);
}
#farthest-corner{
height:100px;
width: 250px;
background: radial-gradient(farthest-corner at 50% 50%, blue, violate, teal);
}


নোট - এর ডিফল্ট মান হল farthest-corner.এটি ইন্টারনেট এক্সপ্লোরার ৯ এবং এর পূর্ববর্তী ভার্সনগুলো গ্রেডিয়েন্ট সাপোর্ট করে না।


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

সিএসএস ৩ এর repeating-radial-gradient() ফাংশন ব্যবহার করে কোন রেডিয়াল গ্রেডিয়েন্টকে রিপিট করা যায়। নিচে রেডিয়াল গ্রেডিয়েন্ট রিপিট করার একটি উদাহরণ দেখুন।

উদাহরণ

#repeat-example{
height:150px;
width:350px;
background: repeating-radial-gradient(blue, teal 15%,violate 25%);
}




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

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত ভার্সন গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
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-







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.