X

X

X

CSS3 Gradients । গ্রেডিয়েন্ট


Gradient Background

দুই বা ততোধিক রংয়ের মধ্যে সমন্বয় করার জন্য CSS3 gradient ব্যবহার করা হয়। আগে একসাথে দুই বা ততোধিক রংকে একসাথে ব্যবহার করার জন্য বিভিন্ন গ্রাফিক্স ইলামেন্ট যেমন ছবি বা ভিডিও ব্যবহার করতে হতো। কিন্তু এখন এটি CSS3 gradient ও Animation ব্যবহার করে করা যায়।

CSS3 এ দুই ধরণের gradient রয়েছে:

  • Linear বা রৈখিক Gradient (down/up/left/right/diagonally বরাবর হয়ে থাকে)
  • Radial বা বৃত্তাকার Gradient (their center থেকে শুরু করে বৃত্তের ন্যয় ব্যসার্ধের মানের সাহায্যে হয়ে থাকে)

Browser Support

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

CSS3 Linear Gradients

Linear Gradient তৈরি করার জন্য ন্যূনতম দুইটি রং ব্যবহার করতে হবে। তাদের শুর ও শেষের দিকের নির্দেশনা দিতে হবে।

Syntax

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

Linear Gradient – Top থেকে Bottom হচ্ছে ডিফল্ট গ্রেডিয়েন্ট ডিরেকশন।

নিচের উদাহরণের , উপর থেকে নিচ বরাবর যথাক্রমে লাল ও হলুদ রংয়ের একটি গ্রেডিয়েন্ট দেখানো হলো:

Code Example

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Linear Gradient – বাম থেকে ডানে

নিচের উদাহরণের , বাম থেকে ডান বরাবর যথাক্রমে লাল ও হলুদ রংয়ের একটি গ্রেডিয়েন্ট দেখানো হলো:

Code Example

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Linear Gradient – Diagonal
ইলামেন্টের কোন থেকে কোনো বা কর্ণ বরাবর গ্রেয়িয়েন্ট ব্যবহার করতে পারবেন।

নিচের উদাহরণে লাল ও হলুদ রং নিয়ে যথাক্রমে বাম-উপর থেকে ডান-নিচ কোন বরাবর একটি গ্রেডিয়েন্ট দেখানো হলো:

Code Example

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: linear-gradient(to bottom right, red, yellow); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


কোন ব্যবহার করে গ্রেডিয়েন্ট

যদি সরাসরি নির্দিষ্ট কোনো কোণ ব্যবহার না করে আর গভীরভাবে এটিকে নিয়ন্ত্রণ করতে চান, তবে গ্রেডিয়েন্টের দিক নির্ধারণ করার জন্য সরাসরি ডিগ্রীতে কৌণিক মান ব্যবহার করতে হবে।

Syntax

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

linear gradient গ্রেডিয়েন্টে কোণ ব্যবহারের নিয়ম নিচে উল্লেখ্য করা হলো:

Code Example

#grad1 {
    height: 100px;
    background: red; /* For browsers that do not support gradients */
    background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


=Color Stop এর ব্যবহার

উপর থেকে নিচে একাধিক রং বিশিষ্ট রৈখিক গ্রেডিয়েন্ট:

Code Example

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: linear-gradient(red, yellow, green); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বাম থেকে ডানে একাধিক রং বিশিষ্ট রৈখিক গ্রেডিয়েন্ট:

Gradient Background

Code Example

#grad1 {
    height: 55px;
    background: red; /* For browsers that do not support gradients */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Transparency এর ব্যবহার

CSS3 gradient এ ফেডিং ইফেক্ট তৈরি করার জন্য transparency এর ব্যবহার করা হয়।:

transparency বা স্বচ্ছতা যুক্ত করার জন্য rgba() function ব্যবহার করা হয়। পূর্বের অধ্যায়ে এই ফাংশন সম্পর্কে সামান্য ধারণা দেওয়া হয়েছে।

নিচে বাম থেকে ডানে, স্বচ্ছ থেকে লাল রং বিশিষ্ট একটি গ্রেডিয়েন্টের উদাহরণ দেওয়া হলো:

Code Example

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


linear-gradient পুনরাবর্তন

repeating-linear-gradient() function ব্যবহার করে লিনিয়ার গ্রেডিয়েন্টকে বারবার উপস্থান করা যায়।

Code Example

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS3 Radial Gradient

ইলামেন্টের কেন্দ্রের উপর ভিত্তি করে রেডিয়াল গ্রেডিয়েন্টের মান নির্ধারণ করা হয়। এটি ব্যবহার করার জন্য কমপক্ষে দুটি রং ব্যবহার করতে হবে।

Syntax

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

ডিফল্ট মানসমূহ: shape = ellipse, size = farthest-corner, এবং position = center ।

Radial Gradient – Evenly Spaced Color Stop (ডিফল্ট মান)

Code Example

#grad1 {
    height: 150px;
    width: 200px;
    background: red; /* For browsers that do not support gradients */
    background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Radial Gradient – Differently Spaced Color Stops

Code Example

#grad1 {
    height: 150px;
    width: 200px;
    background: red; /* For browsers that do not support gradients */
    background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Shape নির্ধারণ

রেডিয়াল গ্রেডিয়েন্ট কেমন হবে তা নির্ধারণ করার জন্য নিচের মত করে কোড লিখতে হবে:

Code Example

#grad1 {
    height: 150px;
    width: 200px;
    background: red; /* For browsers that do not support gradients */
    background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বিভিন্ন Size Keyword সমূহ

চার ধরণের মান ব্যবহৃত হয়। যেমন:

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

Code Example

#grad1 {
    height: 150px;
    width: 150px;
    background: red; /* For browsers that do not support gradients */
    background: radial-gradient(closest-side at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */
}

#grad2 {
    height: 150px;
    width: 150px;
    background: red; /* For browsers that do not support gradients */
    background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


radial-gradient এর পুনারাবর্তন

repeating-radial-gradient() function ব্যবহার করে রেডিয়াল গ্রেডিয়েন্টকে একাধিকবার উপস্থাপণ করা যয়।:

Code Example

#grad1 {
    height: 150px;
    width: 200px;
    background: red; /* For browsers that do not support gradients */
    background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চর্চার করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »  Exercise 7 »