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


দুই বা ততোধিক রঙের পাসাপাসি অবস্থানের মাধ্যমে গ্রাডিয়েন্ট তৈরি করা হয়। সিএসএস 3.0 সংস্করণের gradient ব্যাবহার করে কোন এইচটিএমএল এলিমেন্টের পৃষ্ঠদেশ বা background এ gradient তৈরি করা যায়।

নিচে সিএসএস গ্রাডিয়েন্ট এর বাবহারিক উদাহরন দেখুন।



প্রকারভেদ

সিএসএস এর 3.0 সংস্করণ বা version এ দুই ধরনের গ্রেডিয়েন্ট যুক্ত করা হয়েছ। এগুলো হল নিম্নরূপ।


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

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

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

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


নিচে সিএসএস এর linear-gradient() ফাংশন ব্যাবহার করে লিনিয়ার গ্রেডিয়েন্ট তৈরি করার সিনট্যাক্স দেখুন।

সিনট্যাক্স

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

কোড এডিটর


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

direction -
দুই বা ততোধিক রঙের পরিবর্তন বা transition এর দিক নির্ধারণ করে অর্থাৎ বিভিন্ন দিক থেকে যেমন - উপর থেকে নিচে, বা থেকে ডানে, কোণাকুণি ইত্যাদি দিকে এটি গ্রাডিয়েন্ট তৈরি করে। এর মান হতে- to bottom, to top, to right, to left, to bottom right ইত্যাদি।

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

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

উদাহরণ

#example-one {
   height: 200px;
   background: linear-gradient(teal, blue);
   }

#example-two {
   height:200px;
   background: linear-gradient(to right, teal , blue);
   }

কোড এডিটর


নোট - direction প্যারামিটার এর নন্ন কোন মান নির্ধারণ না করলে, এটি কেবল ওপর থেকে নিচে গ্রেডিয়েন্ট তৈরি করবে।

নোট - ইন্টারনেট এক্সপ্লোরার ৯ এবং এর পূর্ববর্তী সংস্করণ বা version সিএসএস 3.0 এর গ্রেডিয়েন্ট ফাংশন সমর্থন বা support করে না।


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

আনুভূমিক বা horizontal এবং উলম্ব বা vertical অক্ষের অবস্থান ব্যাবহার করে কোনাকুনি অর্থাৎ কৌণিক বা Diagonal গ্রাডিয়েন্ট তৈরি করা যায়।

নিচে একটি উদাহরন দেখুন, যেখানে একটি কৌণিক লিনিয়ার গ্রাডিয়েন্ট তৈরি করা হয়েছে।

উদাহরণ

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

কোড এডিটর



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

গ্রেডিয়েন্টের দিক আরো ভালভাবে নিয়ন্ত্রন করার জন্য পূর্ব নির্ধারিত দিক গুলো অর্থাৎ to bottom, to top, to right, to left, to bottom right ইত্যাদির পরিবর্তে একটি কোণ নির্ধারণ করা যায়। নিচে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

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

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

নিচে একটি উদাহরন দেখুন, যেখানে একটি নির্দিষ্ট কন ব্যাবহার করে লিনিয়ার গ্রাডিয়েন্ট তৈরি করা হয়েছে।

উদাহরণ

#example-one {
   height: 200px;
   background: linear-gradient(-45deg,blue 20%, teal);
   }
   
#example-two {
   height: 200px;
   background: linear-gradient(270deg, blue 20%, teal);
   }

কোড এডিটর


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


দুইয়ের অধিক রঙ ব্যাবহার

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

উদাহরণ

#example-one {
   height: 100px;
   background: linear-gradient(yellow, red, orange);
   }
   
#example-two {
   height:100px;
   background: linear-gradient(to right, red, yellow, orange, blue,indigo);
   }

কোড এডিটর


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


Transparency ব্যবহার

গ্রেডিয়েন্টের সাথে Transparency বা স্বচ্ছতা ব্যবহার করে, ফেইড বা fade ইফেক্ট তৈরি করা যায়। নিচে এর একটি বাবহারিক উদাহরন দেখুন।


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

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

উদাহরণ

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

কোড এডিটর



repeating-linear-gradient()

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


নিচে একটি উদাহরণ দেখুন, যেখানে একটি গ্রেডিয়েন্ট পুনরাবৃত্তি হবে যা টিয়ে রঙ দিয়ে শুরু হবে এবং লাল রঙ দিয়ে শেষ হবে।

উদাহরণ

#example {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
   }

কোড এডিটর



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

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

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

সিনট্যাক্স

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

নিচে একটি উদাহরন দেখুন, যেখানে রেডিয়াল গ্রেডিয়েন্ট তৈরি করা হয়েছে।

উদাহরণ

#example {
   background-image: radial-gradient(teal, green, lime);
   }

কোড এডিটর



আকার ও আকৃতি নির্ধারণ

circle অথবা ellipse কিওয়ার্ড ব্যাবহার করে রেডিয়াল গ্রেডিয়েন্ট এর আকৃতি নির্ধারণ করা যায়। তবে ellipse হচ্ছে পূর্ব-নির্ধারিত বা default মান।

নিচে একটি উদাহরন দেখুন, যেখানে উপবৃত্ত বা 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 {
   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.এটি ইন্টারনেট এক্সপ্লোরার ৯ এবং এর পূর্ববর্তী সংস্করণ বা version গুলো গ্রেডিয়েন্ট সমর্থন বা support করে না।


repeating-radial-gradient()

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

উদাহরণ

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

কোড এডিটর



ব্রাউজার সমর্থন

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

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

সকল গ্রাডিয়েন্ট ফাংশন

ফাংশনবর্ণনা
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()