সিএসএস গ্রাডিয়্যান্ট এর ব্যবহার

This translation is incomplete. Please help translate this article from English.

সিএসএস গ্রাডিয়্যান্ট হচ্ছে নতুন ধরনের  <image> যাকে সিএসএস৩ এর ইমেজ মডিউলে অন্তর্ভূক্ত করা হয়েছে। সিএসএস গ্রাডিয়্যান্ট ব্যবহার করে আপনি দুই বা ততোধিক রং এর মধ্যে নিখুত ট্রানজিশন দেখাতে পারেন। এটি এই ধরনের ইফেক্টের জন্য ইমেজের ব্যবহার এড়ানোয় সহায়তা করে, একই সাথে ডাউনলোডের সময় এবং ব্যন্ডউইথ এর ব্যবহার কমায়। তদুপরি, গ্রাডিয়্যান্ট যেহেতু ব্রাউজার দ্বারা সৃষ্টি হয়, গ্রাডিয়্যান্টযুক্ত বস্তূ সমূহকে জুম করার পরও সুন্দর দেখা যায়, এবং আপনি আপনার লে-আউটটি আরো সহজেই সাজাতে পারেন।

ব্রাউজার সমূহ দুই ধরনের গ্রাডিয়্যান্ট অনুমোদন করে: লিনিয়ার, linear-gradient ফাংশন দ্বারা নির্দেশিত, এবং রেডিয়াল, radial-gradient দ্বারা নির্দেশিত।

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

লিনিয়ার গ্রাডিয়্যান্ট তৈরি করতে, আপনি একটি প্রারম্ভিক বিন্দু নির্ধারন করুন এবং একটি দিক ( একটি কোণ দ্বারা বিশেষায়িত ) যেদিকে গ্রাডিয়্যান্ট ইফেক্টটি প্রযুক্ত হয়। আপনি কালার স্টপস ও নির্ধারণ করুন। কালার স্টপস সমূহ হচ্ছে ঐসব রং, গেকো যাদের  নিখুত ট্রানজিশন সম্পন্ন করবে, এবং আপনাকে কমপক্ষে দুইটি রং নির্দেশ করতে হবে, কিন্তু আরো জটিল গ্রাডিয়্যান্ট ইফেক্টের জন্য দুই এর বেশি রং নির্দেশ করতে পারেন।

সাধারণ লিনিয়ার গ্রাডিয়্যান্ট

কেন্দ্র ( আনুভূমিকভাবে ) এবং উপর ( লম্বভাবে ) থেকে শুরু হওয়া একটি লিনিয়ার গ্র্যাডিয়্যান্ট , এবং নীল থেকে সাদা পর্যন্ত ট্রানজিশন ।

স্ক্রিণশট লাইভ ডেমো
 
/* পুরাতন সিনট্যাক্স, অনুমোদনহীন, এখনো প্রয়োজন, পিফিক্স হিসাবে ব্যবহত, পুরাতন এবং ওয়েবকিট ভিত্তিক ব্রাউজার */
background: -prefix-linear-gradient(top, blue, white); 

/* প্রিফিক্স ছাড়া স্ট্যান্ডার্ড-কমপ্লায়েন্ট ব্রাউজার এর নতুন সিনট্যক্স (অপেরা ১২.১, আই ই ১০, ফায়ারফক্স ১৬ এবং এর বেশি) */
background: linear-gradient(to bottom, blue, white);

(বিভিন্ন ব্রাউজার সংস্করণে সমর্থনের জন্য প্রয়োজনীয় প্রিফিক্স সম্পর্কে জানার জন্য  ব্রাউজার উপযুক্ততা টেবিল দেখুন )

একই গ্রাডিয়্যান্টকে বাম থেকে ডানে বিস্তৃত করে :

স্ক্রিণশট লাইভ ডেমো
basic_linear_blueleft.png
 
/* পুরাতন সিনট্যাক্স, অনুমোদনহীন, এখনো প্রয়োজন, পিফিক্স হিসাবে ব্যবহত, পুরাতন এবং ওয়েবকিট ভিত্তিক ব্রাউজার */
background: -prefix-linear-gradient(left, blue, white); 

/* প্রিফিক্স ছাড়া স্ট্যান্ডার্ড-কমপ্লায়েন্ট ব্রাউজার এর নতুন সিনট্যক্স (অপেরা ১২.১, আই ই ১০, ফায়ারফক্স ১৬ এবং এর বেশি) */
background: linear-gradient(to right, blue, white); 

(বিভিন্ন ব্রাউজার সংস্করণে সমর্থনের জন্য প্রয়োজনীয় প্রিফিক্স সম্পর্কে জানার জন্য  ব্রাউজার উপযুক্ততা টেবিল দেখুন )

You can make the gradient run diagonally by specifying both the horizontal and vertical starting positions. For example:

স্ক্রিণশট লাইভ ডেমো
basic_linear_bluetopleft.png
 
/* পুরাতন সিনট্যাক্স, অনুমোদনহীন, এখনো প্রয়োজন, পিফিক্স হিসাবে ব্যবহত, পুরাতন এবং ওয়েবকিট ভিত্তিক ব্রাউজার */
background: -prefix-linear-gradient(left top, blue, white); 

/* প্রিফিক্স ছাড়া স্ট্যান্ডার্ড-কমপ্লায়েন্ট ব্রাউজার এর নতুন সিনট্যক্স (অপেরা ১২.১, আই ই ১০, ফায়ারফক্স ১৬ এবং এর বেশি) */
background: linear-gradient(to bottom right, blue, white);

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

If you don't specify an angle, one is determined automatically based on the given direction. If you'd like more control over the direction of the gradient, you can set the angle specifically.

For example, here are two gradients, the first one with a direction of towards the right, and the second one has an angle of 70 degrees.

linear_gradient_angle.png

ডান পাশেরটি নিচের সিএসএস ব্যবহার করে।

background: linear-gradient(70deg, black, white);

The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words, 0deg creates a vertical gradient from the bottom to the top, while 90deg generates a left to right horizontal gradient :

linear_redangles.png

background: linear-gradient(<angle>, red, white);

Note: several browsers implement, prefixed, an older draft of the specification where 0deg was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient.  An easy formula to remember is 90 - x = y, where x is the standard usage, and y is the non-standard, vendor-prefixed usage.

কালার স্টপস

Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.

If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.

উদাহরণ: তিনটি কালার স্টপস

উদাহরণটি  তিনটি কালার স্টপস প্রদর্শন করে।

স্ক্রিণশট লাইভ ডেমো
linear_colorstops1.png
 
/* পুরাতন সিনট্যাক্স, অনুমোদনহীন, এখনো প্রয়োজন, পিফিক্স হিসাবে ব্যবহত, পুরাতন এবং ওয়েবকিট ভিত্তিক ব্রাউজার */
background: -prefix-linear-gradient(top, blue, white 80%, orange);

/* প্রিফিক্স ছাড়া স্ট্যান্ডার্ড-কমপ্লায়েন্ট ব্রাউজার এর নতুন সিনট্যক্স (অপেরা ১২.১, আই ই ১০, ফায়ারফক্স ১৬ এবং এর বেশি) */
background: linear-gradient(to bottom, blue, white 80%, orange);

Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.

Example: Evenly spaced color stops

Here's an example using a wide variety of colors, all evenly spaced:

স্ক্রিণশট লাইভ ডেমো
linear_rainbow.png
 
/* পুরাতন সিনট্যাক্স, অনুমোদনহীন, এখনো প্রয়োজন, পিফিক্স হিসাবে ব্যবহত, পুরাতন এবং ওয়েবকিট ভিত্তিক ব্রাউজার */
background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);

/* প্রিফিক্স ছাড়া স্ট্যান্ডার্ড-কমপ্লায়েন্ট ব্রাউজার এর নতুন সিনট্যক্স (অপেরা ১২.১, আই ই ১০, ফায়ারফক্স ১৬ এবং এর বেশি) */
background: linear-gradient(to right, red, orange, yellow, green, blue);

Notice that the color stops are automatically spaced evenly when no locations are specified.

ট্রান্সপারেন্সি এবং গ্রাডিয়্যান্টস

Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:

for Transparency and gradients example

/* পুরাতন সিনট্যাক্স, অনুমোদনহীন, এখনো প্রয়োজন, পিফিক্স হিসাবে ব্যবহত, পুরাতন এবং ওয়েবকিট ভিত্তিক ব্রাউজার */ 
background: -prefix-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

/* প্রিফিক্স ছাড়া স্ট্যান্ডার্ড-কমপ্লায়েন্ট ব্রাউজার এর নতুন সিনট্যক্স (অপেরা ১২.১, আই ই ১০, ফায়ারফক্স ১৬ এবং এর বেশি) */  
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.

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

Radial gradients are specified using the radial-gradient functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.

কালার স্টপস

You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.

Example: Evenly spaced color stops

By default, as with linear gradients, the color stops are evenly spaced:

স্ক্রিণশট লাইভ ডেমো
radial_gradient_even.png
 
background: radial-gradient(red, yellow, rgb(30, 144, 255));

Example: Explicitly spaced color stops

Here we specify specific locations for the color stops:

স্ক্রিণশট লাইভ ডেমো
radial_gradient_varied.png
 
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

আকার

This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See this description of the size constants for specifics.

Example: closest-side for ellipses

This ellipse uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

স্ক্রিণশট লাইভ ডেমো
radial_ellipse_size1.png
 
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

Example: farthest-corner for ellipses

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

স্ক্রিণশট লাইভ ডেমো
radial_ellipse_size2.png
 
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

Example: closest-side for circles

This example uses closest-side, which determines the circle's size as the distance between the start point (the center) and the closest side.

স্ক্রিণশট লাইভ ডেমো
radial_circle_size1.png
 
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.

রিপিটিং গ্রাডিয়্যান্টস

The linear-gradient and radial-gradient properties don't support automatically repeating the color stops. However, the repeating-linear-gradient and repeating-radial-gradient properties are available to offer this functionality.

উদাহরণ: রিপিটিং লিনিয়ার গ্রাডিয়্যান্টস

এই উদাহরণ সমূহ গ্রাডিয়্যান্ট তৈরির জন্য  repeating-linear-gradient ব্যবহার করে।

স্ক্রিণশট লাইভ ডেমো
repeating_linear_gradient.png
 
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

repeating-linear-gradient প্রোপার্টি ব্যবহার করে এমন আরেকটি উদাহরণ।

repeat_background_gradient_checked.png

background-color: #000;
background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
      rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px);

উদাহরণ: রিপিটিং রেডিয়াল গ্রাডিয়্যান্টস

এই উদাহরণ সমূহ গ্রাডিয়্যান্ট তৈরির জন্য repeating-radial-gradient ব্যবহার করে।

স্ক্রিণশট লাইভ ডেমো
repeating_radial_gradient.png
 
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

আরো দেখুন

ডকুমেন্ট ট্যাগ এবং অবদানকারী

 Contributors to this page: Sebastianz, anistuhin
 সর্বশেষ হালনাগাদ করেছেন: Sebastianz,