Creative IT Blog Just another WordPress site
Related Articles
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
Linear এবং Radial দুই ধরনের Gradients আজকের tuterial এ দেখানোর চেষ্টা করেছি । আশা করি সবাই উপকৃত হবেন। ধন্যবাদ।
