CSS3 gradients দুটি color এর মধ্যে সংযোগ স্থল কে মসৃণ করে।
এই কাজ টি করার জন্য আপনাকে একটি image ব্যাবহার করতে হবে। তবে CSS3 gradient ব্যাবহার করে আপনি download
এবং bandwidth usage কমাতে পারবেন। একইসাথে gradient এর মাধ্যমে করা element গুলি ভাল দেখায় যখন zoom
করা হয়, কেননা gradient সবসময় browser এ সৃষ্টি হয়।
CSS3 তে ২ ধরনের gradient দেখা যায়-
- Linear (রৈখিক ) Gradients (goes down/up/left/right/diagonally)
- Radial (বৃত্তীয়) Gradients (defined by their center)
ব্রাউজার সাপর্ট
নিম্নে দেয়া browser version গুলি প্রাথমিক version যা এই property কে সম্পূর্ণ সমর্থন করে।
সংখ্যা -webkit-, -moz-, or -o- দ্বারা browser version নির্দেশ করা হয়েছে-
প্রোপার্টি
|
 |
 |
 |
 |
 |
 |
| linear-gradient |
26.0
10.0 -webkit-
|
12.0
|
10.0
|
16.0
3.6 -moz-
|
6.1
5.1 -webkit-
|
12.1
11.1 -o-
|
| radial-gradient |
26.0
10.0 -webkit-
|
12.0
|
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-
|
12.0
|
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-
|
12.0
|
10.0
|
16.0
3.6 -moz-
|
6.1
5.1 -webkit-
|
12.1
11.6 -o-
|
CSS3 Linear (রৈখিক) Gradients
একটি linear gradient তৈরি করার জন্য কমপক্ষে দুটি "color stop" দরকার হবে। color stop হচ্ছে একটি স্থান যেখানে দুটি
color এর মিলন ঘটে। আপনি এর সাথে একটি gradient effect দ্বারা আদ্যস্থল এবং একটি দিক(অথবা কোণ) ঠিক করে দিতে
পারেন।
কোড গুলি লিখার পদ্ধতি-
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - Top to Bottom (রৈখিক Gradient - উপর থেকে নিচ আবধি)
নিচের উদাহরণ টি Linear Gradient এর একটি উদাহরণ যেটি শুরু হয়েছে top থেকে এবং এখানে red এবং blue এর transition দেখানো
হয়েছে।
উদাহরণটিঃ
#grad {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
Linear Gradient - Left to Right(বা থেকে ডান দিকে)
নিচের উদাহরণ টি আপনাকে একটি linear gradient দেখাবে যেখানে এই বাম পাশ থেকে শুরু হয়। এখানে red এবং blue এর transition দেখানো
হয়েছে।
উদাহরনঃ
#grad {
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
}
Linear Gradient - Diagonal (তির্যক)
আপনি একটি Diagonal Gradient তৈরি করতে পারেন যেখানে এর horizontal(আনুভূমিক) and vertical(খাড়া) শুরুর স্থানটিকে
নির্দিষ্ট করে দিতে হয়।
নিচের উদাহরণটি থেকে এই বিষয় টি ভাল ভাবে বুজতে পারবেন।
এটি একটি linear gradient যা top left থেকে শুরু হয় এবং bottom right এ শেষ হয়।
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}
Using Angles (কোণ এর ব্যাবহার)
আপনি যদি gradient এর উপর আরও বেশি নিয়ন্ত্রণে রাখতে চান তবে আপনাকে একটি angle নির্দিষ্ট করতে হবে পূর্বে নির্দিষ্ট
করা গতিপথ(to bottom, to top, to right, to left, to bottom right, etc.) বাদ দিয়ে।
কোডটি নিম্নরূপ-
background: linear-gradient(angle, color-stop1, color-stop2);
Horizontal line এবং gradient line এর মধ্যে একটি কোণ নির্দিষ্ট করার জন্য Angle ব্যাবহার করা হয়। যেটি ঘড়ির ঘূর্ণন এর উল্টা।
আপরদিকে, 0 ডিগ্রী bottom থেকে top gradient এবং 90 ডিগ্রী left থেকে right gradient তৈরি করে।
কোডগুলি নিম্নরূপ -
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
Using Multiple Color Stops (একাধিক Color Stop এর ব্যাবহার)
নিম্নের উদাহরনে একাধিক Color Stop এর ব্যাবহার পদ্ধতি দেখানো হয়েছে।
কোড-
#grad {
background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax */
}
নিচের উদাহরণটি তে rainbow color দ্বারা linear gradient তৈরি করণ পদ্ধতি-
কোড-
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Using Transparency (স্বচ্ছতার ব্যাবহার)
CSS3 gradient স্বচ্ছতা সমর্থন করে।এটি ব্যাবহার করা হয় fading effects তৈরি করার জন্য।
স্বচ্ছতা তৈরি করার জন্য এবং color stop নির্দিষ্ট করার জন্য "rgba()" function টি ব্যাবহার করা হয়।
rgba() function এর শেষ parameter value 0 থেকে 1 এবং এটি স্বচ্ছতা নির্দেশ করে। এখানে 0 দ্বারা সম্পূর্ণ
স্বচ্ছতা এবং 1 দ্বারা full color নির্দেশ করে।
নিম্নে এর উদাহরণ দেয়া হল-
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
Repeating a linear-gradient (linear-gradient এর পুনরাবৃত্তি)
"repeating-linear-gradient()" function টি ব্যাবহার করা হয় linear gradient এর পুনরাবৃত্তি করার জন্য।
উদাহরনঃ
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
CSS3 Radial Gradients
Radial gradient টি কেন্দ্র দ্বারা নির্দিষ্ট করা হয়।
একটি radial gradient তৈরি করতে আপনাকে কমপক্ষে দুটি color stops নির্দিষ্ট করতে হবে।
Radial Gradient তৈরির Syntax নিম্নরুপঃ
background: radial-gradient(shape size at position, start-color, ..., last-color);
স্বাভাবিক ভাবে আকৃতি হয় উপবৃত্তাকার, কোণ টি দূরবর্তী কোনায় হয়, উৎপন্ন হয় কেন্দ্রে।
Radial Gradient - Evenly Spaced Color Stops (Color Stop গুলি সমব্যবধান এ থাকে )
উদাহরনঃ
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
Radial Gradient - Differently Spaced Color Stops(ভিন্ন ব্যবধানের Color Stop)
উদাহরনঃ
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
}
Set Shape (আকার নির্দিষ্টকরণ)
Shape parameter টি gradient এর shape নির্দিষ্ট করে। এটি circle(বৃত্তাকার) বা ellipse(উপবৃত্তাকার) এর value
গ্রহন করতে পারে।
উদাহরনঃ
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}
Use of Different Size Keywords (বিভিন্ন ধরনের Keyword এর ব্যাবহার)
Size parameter দ্বারা gradient এর size নির্দিষ্ট করা হয়। এর ৪ ধরনের মান হতে পারে-
- closest-side
- farthest-side
- closest-corner
- farthest-corner
উদাহরনঃ
বিভিন্ন আকারের keyword সংবলিত একটি radial gradient এর উদাহরণ নিম্নরূপ-
#grad1 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}
Repeating a radial-gradient (radial-gradient এর পুনরাবৃত্তি)
repeating-radial-gradient(), function টি ব্যাবহার করা হয় radial gradient এর পুনরাবৃত্তি করার জন্য।
উদাহরনঃ
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox 3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Standard syntax */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
