خاصیت Gradients در CSS3 (سی اس اس 3) به شما این امکان را می دهد تا یک انتقال آرام بین دو یا چند رنگ مختلف را نمایش دهید.
پیش از این، برای داشتن اینگونه افکت ها، ناچار بودیم از تصاویر استفاده کنیم. اما با استفاده از خاصیت Gradients در CSS3 (سی اس اس 3) می توان زمان دانلود و مصرف پهنای باند را کاهش داد. علاوه بر این، عناصری که خاصیت Gradients در آنها بکار رفته ، زمانی که روی آن عناصر Zoom می کنید بهتر بنظر می آیند، چون Gradients بوسیله مرورگر ایجاد می شود.
CSS3 دو نوع متفاوت از Gradients را ارائه داده است:
-
(Linear Gradients (goes down/up/left/right/diagonally
-
(Radial Gradients (defined by their center
پشتیبانی مرورگرها
|
خاصیت |
|
|
|
|
|
|
linear-gradient |
10.0 |
26.0
10.0 -webkit- |
16.0
3.6 -moz- |
6.1
5.1 -webkit- |
12.1
11.1 -o- |
|
radial-gradient |
10.0 |
26.0
10.0 -webkit- |
16.0
3.6 -moz- |
6.1
5.1 -webkit- |
12.1
11.6 -o- |
|
repeating-linear-gradient |
10.0 |
26.0
10.0 -webkit- |
16.0
3.6 -moz- |
6.1
5.1 -webkit- |
12.1
11.1 -o- |
|
repeating-radial-gradient |
10.0 |
26.0
10.0 -webkit- |
16.0
3.6 -moz- |
6.1
5.1 -webkit- |
12.1
11.6 -o-
|
مرورگرهای +Internet Explorer 10+, Firefox 16+, Chrome 26+, Opera 12.1 توابع شیب رنگ را پشتیبانی می کنند.
مرورگر +Safari 5.1 نیاز به پیشوند -webkit دارد.
مرورگر Chrome از نسخه 10 تا 25 نیاز به پیشوند -webkit- دارد.
مرورگر Opera از نسخه 11.1 تا 12.0 نیاز به پیشوند -o- دارد.
مرورگر Firefox از نسخه 3.6 تا 15 نیاز به پیشوند -moz- دارد.
مرورگر Internet Explorer 9 و نسخه های قبلی آن، شیب رنگ را پشتیبانی نمی کنند.
Linear Gradient یا شیب رنگ خطی در CSS3
برای ایجاد یک شیب رنگ خطی حداقل باید دو رنگ تعریف کنید.
نحوه استفاده
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: جهت شروع شیب رنگ را مشخص می کند، که یکی از چهار مقدار top, bottom, right و left را می پذیرد. مقدار top مقدار پیشفرض است.
color-stop: رنگ هایی هستند که می خواهید در طول Gradient استفاده شوند و می توانند بی نهایت باشند و بایستی هر رنگ را با (,) از رنگ بعدی جدا کرد.
Linear Gradient (شیب رنگ خطی) از بالا به پایین (مقدار پیشفرض)
مثال زیر یک شیب رنگ را نشان می دهد که از بالا شروع شده و از قرمز به آبی منتقل می شود:
#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 (شیب رنگ خطی) از چپ به راست
مثال زیر یک شیب رنگ را نشان می دهد که از چپ شروع می شود و از قرمز به آبی منتقل می شود:
#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 (شیب خطی) مورب
می توان یک شیب خط مورب را با مشخص کردن افقی عمودی بودن نقطه شروع ایجاد کرد.
مثال زیر یک شیب خطی را نشان می دهد که از زاویه بالای سمت چپ شروع می شود و به پایین سمت راست ختم می شود و از قرمز به آبی منتقل می شود:
#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 */
}
استفاده از زاویه
اگر می خواهید کنترل بیشتری روی جهت شیب رنگ داشته باشید، می توانید از زاویه به جای چهار جهت اصلی استفاده کنید.
نحوه استفاده
background: linear-gradient(angle, color-stop1, color-stop2);
angel : زاویه بین خط افقی و شیب رنگ را مشخص می کند و برخلاف عقربه های ساعت می چرخد. بعبارت دیگر، 0 درجه یک شیب رنگ از پایین به بالا ایجاد می کند، درحالی که 90 درجه شیب رنگی از چپ به راست تولید می کند.
مثال زیر، یک شیب رنگ خطی با یک زاویه مشخص را ایجاد می کند:
#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 */
}
استفاده از چندین رنگ
مثال زیر نحوه استفاده از چندین رنگ را نشان می دهد:
#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 */
}
مثال زیر، نحوه ایجاد یک شیب رنگ خطی با رنگ های رنگین کمان را نشان می دهد:
#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);
}
استفاده از شفافیت ( Transparency )
شیب رنگ در CSS3 شفافیت یا Transparency را پشتیبانی می کند، که می توان برای ایجاد افکت های محو شدگی از آن استفاده کرد.
برای اضافه کردن Transparecy از تابع rgba()برای تعریف رنگ ها استفاده می کنیم. آخرین پارامتر در تابع ()rgba شفافیت رنگ را مشخص می کند و عددی بین 0 تا 1 است. (0 نشان دهنده بیشترین شفافیت و 1 نشان دهنده رنگ کامل و بدون شفافیت است)
مثال زیر، یک شیب رنگ خطی را نشان می دهد که از سمت چپ و با حداکثر شفافیت شروع می شود و در آخر به رنگ کامل و بدون شفافیت ختم می شود:
#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-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%);
}
Radial Gradient یا شیب رنگ مدوٌر در CSS3
برای ایجاد یک شیب خطی مدوٌر باید حداقل از دو رنگ استفاده کنید.
نحوه استفاده
background: radial-gradient(shape size at position, start-color, ..., last-color);
بصورت پیشفرض، مرکز شیب رنگ center و شکل آن ellipse و اندازه آن مقدار farthest-side است.
شیب رنگ مدوٌر - درصد پیشرفت رنگ یکسان (مقدار پیشفرض)
#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 */
}
شیب رنگ مدوٌر - درصد پیشرفت رنگ متفاوت
#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 */
}
پارامترShape
با استفاده از پارامتر shape، می توانید شکل مورد نظرتان را تعیین کنید. این مقدار می تواند circle (دایره) یا ellipse (بیضی) باشد. مقدار پیشفرض ellipse است.
#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 */
}
پارامتر Size (استفاده از اندازه های متفاوت )
با استفاده از پارامتر size، می توانید اندازه شیب رنگ را مشخص نمایید. این مقدار می تواند یکی از کلمات کلیدی زیر باشد:
-
closest-side
-
farthest-side
-
closest-corner
-
farthest-corner
مثال
#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-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%);
}