CSS3 এর মাধ্যমে Gradient effect - প্রিয়লেখা

CSS3 এর মাধ্যমে Gradient effect

sakeba
Published: September 28, 2016

CSS3 এর  মাধ্যমে ফটোশপের মত gradient  effect যেমন- linear , radial  এসব ধরণের ইফেক্ট ই দেওয়া যায়।এগুলো  আজকে আমার টিউটোরিয়াল এ দেখাব  কিভাবে এই ইফেক্টগুলোর কোড লিখতে হয় ।এক্ষেত্রে সকল ব্রাউজারের জন্য আলাদা আলাদা কোড উল্লেখ করে দিতে হয়।
css3 এর দুই ধরনের gradient  effect আছে ।

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

CSS3 Linear Gradients:
Syntax : background: linear-gradient(direction, color-stop1, color-stop2, …);

নিচে html এবং css এর code দেয়া হল ।
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
height: 200px;
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(skyblue, yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id=”grad”></div>
</body>
</html>

উপরের code গুলো  কপি করে editor এ নিয়ে paste করলে নিচের ছবির মত output পাবেন ।
Output:

grad01
Linear Gradient – Left to Right:

gradient color এর direction default ভাবে top থেকে bottom এ হয় , কিন্তু আমরা  direction যদি উল্লেখ করে দিই তাহলে সেই direction অনুযায়ী gradient color দেখাবে । নিচের code এ লেফট থেকে রাইট এ gradient color দেখানো হয়েছে ।
CSS code:
#grad {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, skyblue, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, skyblue, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, skyblue, yellow); /* Standard syntax (must be last) */
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।
Output:

grad02
Linear Gradient – Diagonal:

যদি কোন একটা corner থেকে gradient ইফেক্ট দিতে চাই তাহলে নিচের মত করে css property use  করতে হবে ।
CSS code:
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।
Output:

grad03

Using Multiple Color Stops:

যদি multiple color use  করতে হয় সেক্ষেত্রে নিচের মত করে css property use  করতে হবে ।

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax */
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।
Output:

grad04
Gradient Background:
#grad {
background: red; /* For browsers that do not support gradients */
/* 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);
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।
Output:

grad05

Repeating a linear-gradient:

#grad {
background: red; /* For browsers that do not support gradients */
/* 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%);
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।
Output:

grad06

CSS3 Radial Gradients:

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

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax */
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।
Output:

grad07
Radial Gradient – Differently Spaced Color Stops:
Code:
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।

Output:

grad08

Set Shape:

#grad {
background: red; /* For browsers that do not support gradients */
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 */
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।
Output:

grad09

Repeating a radial-gradient

#grad {
background: red; /* For browsers that do not support gradients */
/* 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%);
}

উপরের code গুলো  কপি করে একটি css ফাইল এ নিয়ে paste করলে নিম্নের ন্যায় ouptut পাওয়া যায় ।
Output:

grad10

Linear এবং  Radial দুই ধরনের Gradients আজকের tuterial এ দেখানোর চেষ্টা করেছি । আশা করি সবাই উপকৃত হবেন। ধন্যবাদ।