سبد (0)

شیب رنگ در CSS3

شیب رنگ (Gradient) در CSS3

Wiki

Linear gradient

شیب رنگ (Gradient) در CSS3، به شما اجازه می دهد تا، یک انتقال آرام بین دو یا چند رنگ مختلف را نمایش دهید.

پیش از این، برای داشتن اینگونه افکت ها، باید از تصاویر استفاده می کردیم. اما با استفاده از شیب رنگ در CSS3 می توانید زمان دانلود و پهنای باند استفاده شده را کاهش دهید. علاوه بر این چون شیب رنگ بوسیله مرورگر ایجاد می شود، زمانی که روی عناصر Zoom می کنید، شیب رنگ بهتر بنظر می آید.

در CSS3 دو نوع شیب رنگ تعریف شده است:

  • Linear Gradient یا شیب رنگ خطی: به صورت دو یا چند رنگ، پشت سر هم به حالت افقی، عمودی یا مورب
  • Radial Gradient یا شیب رنگ مدوّر (تابشی): به صورت دو یا چند رنگ تو در تو به صورت مدوّر

پشتیبانی مرورگرها

Wiki

Functionپشتیبانی مرورگرها
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()

مرورگرهای +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

Wiki

برای ایجاد شیب رنگ خطی، حداقل باید دو رنگ تعریف کنید.

مثال:

Linear gradient

نحوه استفاده:

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

direction: جهت شروع شیب رنگ را مشخص می کند، که یکی از چهار مقدار top, bottom, right و left را می پذیرد. مقدار top مقدار پیشفرض است.

color-stop: رنگ هایی هستند که می خواهید در طول Gradient استفاده شوند و می توانند بی نهایت باشند و بایستی هر رنگ را با (,) از رنگ بعدی جدا کرد.


شیب رنگ خطی از بالا به پایین (مقدار پیشفرض)

Wiki

در مثال زیر، شیب رنگ، از بالا شروع می شود و از قرمز به آبی منتقل می شود:

مثال (شیب رنگ در CSS3)

شیب رنگ خطی از بالا به پایین:

#grad
{
background: -webkit-linear-gradient(red, blue); /* For Safari */
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 */
}
خودتان امتحان کنید »

شیب رنگ خطی از چپ به راست

Wiki

در مثال زیر، شیب رنگ، از چپ شروع می شود و از قرمز به آبی منتقل می شود:

مثال (شیب رنگ در CSS3)

شیب رنگ خطی از چپ به راست:

#grad
{
background: -webkit-linear-gradient(left, red , blue); /* For Safari */
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 */
}
خودتان امتحان کنید »

شیب رنگ خطی مورب

Wiki

برای ایجاد شیب رنگ مورب باید افقی عمودی بودن نقطه شروع را مشخص نمایید.

نحوه استفاده:

background: linear-gradient(startfrom1 startfrom2, color-stop1, color-stop2, ...);

Startfrom1: نقطه شروع اول را تعیین میکند که یکی از مقادیر top  و bottom را می پذیرد.

Startfrom2: نقطه شروع دوم را تعیین می کند که یکی از مقادیر left و right را می پذیرد.

در مثال زیر، شیب رنگ، از زاوبه بالا سمت چپ شروع می شود (و به پایین سمت راست ختم می شود) و از قرمز به آبی منتقل می شود:

مثال (شیب رنگ در CSS3)

شیب رنگ خطی از زاویه بالا سمت چپ شروع می شود (و به پایین سمت راست ختم می شود):

#grad
{
background: -webkit-linear-gradient(left top, red , blue); /* For Safari */
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 */
}
خودتان امتحان کنید »

استفاده از زاویه

Wiki

اگر می خواهید کنترل بیشتری روی جهت شیب رنگ داشته باشید، می توانید از درجه بجای چهار جهت اصلی استفاده کنید.

نحوه استفاده:

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

angle: زاویه بین خط افقی و شیب رنگ را مشخص می کند و برخلاف عقربه های ساعت می چرخد. بعبارت دیگر، 0 درجه یک شیب رنگ از پایین به بالا ایجاد می کند، درحالی که 90 درجه شیب رنگی از چپ به راست تولید می کند.

مثال زیر، نحوه استفاده از شیب رنگ مورب را نشان می دهد:

مثال (شیب رنگ در CSS3)

یک شیب رنگ خطی با یک زاویه مشخص:

#grad
{
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari */
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 */
}
خودتان امتحان کنید »

استفاده از چندین رنگ

Wiki

مثال زیر، نحوه استفاده از چندین رنگ را نشان می دهد:

مثال (شیب رنگ در CSS3)

یک شیب رنگ از بالا به پایین با چندین رنگ:

#grad
{
background: -webkit-linear-gradient(red, green, blue); /* For Safari */
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 */
}
خودتان امتحان کنید »

مثال زیر، نحوه ایجاد یک شیب رنگ خطی با رنگ های رنگین کمان را نشان می دهد:

مثال (شیب رنگ در CSS3)

#grad
{
/* For Safari */
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

Wiki

شیب رنگ در CSS3، شفافیت یا transparency را پشتیبانی می کند، و می توان از آن برای ساخت افکت های محوشدگی استفاده نمود.

برای اضافه کردن شفافیت، ما از تابع ()rgba برای تعریف رنگ ها استفاده می کنیم. آخرین پارامتر در تابع ()rgba شفافیت رنگ را مشخص می کند و عددی بین 0 تا 1 است. (0 نشان دهنده بیشترین شفافیت و 1 نشان دهنده رنگ کامل و بدون شفافیت است)

مثال زیر، یک شیب رنگ خطی را نشان می دهد که از سمت چپ و با حداکثر شفافیت شروع می شود و در آخر به رنگ کامل و بدون شفافیت ختم می شود:

مثال (شیب رنگ در CSS3)

یک شیب رنگ خطی از چپ به راست با transparency:

#grad
{
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11-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*/
}
خودتان امتحان کنید »

شیب رنگ تکرار شونده

Wiki

با استفاده از تابع ()repeating-linear-gradient می توان شیب رنگ را تکرار کرد:

مثال (شیب رنگ در CSS3)

یک شیب رنگ تکرار شونده:

#grad
{
/* Safari */
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

Wiki

برای ایجاد شیب رنگ مدوٌر نیز، حداقل باید دو رنگ را مشخص کنید.

مثال:

Radial gradient

نحوه استفاده:

background: radial-gradient(startfrom, shape size, start-color, ..., last-color);

startfrom: مرکز شیب رنگ (چهار جهت اصلی/چهار جهت فرعی/مقدار center)

shaple: شکل شیب رنگ (circle/ellipse)

size: اندازه شیب رنگ

بصورت پیشفرض، مرکز شیب رنگ center و شکل آن ellipse و اندازه آن مقدار farthest-side است.


شیب رنگ مدور - درصد پیشرفت رنگ یکسان (مقدار پیشفرض)

مثال (شیب رنگ در CSS3)

یک شیب رنگ مدوٌر با درصد پیشرفت رنگ یکسان

#grad
{
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
خودتان امتحان کنید »

شیب رنگ مدوٌر - درصد پیشرفت رنگ متفاوت

مثال (شیب رنگ در CSS3)

یک شیب رنگ مدوٌر با درصد پیشرفت رنگ متفاوت

#grad
{
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.1-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

Wiki

با استفاده از پارامتر shape، می توانید شکل مورد نظرتان را تعیین کنید. این مقدار می تواند circle (دایره) یا ellipse (بیضی) باشد. مقدار پیشفرض ellipse است.

مثال (شیب رنگ در CSS3)

یک شیب رنگ مدوٌر با شکل دایره ای:

#grad
{
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.1 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

Wiki

با استفاده از پارامتر size، می توانید اندازه شیب رنگ را مشخص نمایید. این مقدار می تواند یکی از کلمات کلیدی زیر باشد:

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

مثال (شیب رنگ در CSS3)

یک شیب رنگ مدوٌر با اندازه های مختلف:

#grad1
{
/* Safari */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* For Opera 11.1 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(60% 55%, closest-side,blue,green,yellow,black);
}

#grad2
{
/* Safari */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.1 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(60% 55%, farthest-side,blue,green,yellow,black);
}
خودتان امتحان کنید »

شیب رنگ مدوٌر تکرار شونده

Wiki

با استفاده از تابع ()repeating-radial-gradient، می توانید شیب رنگ مدوٌر را تکرار نمایید:

مثال (شیب رنگ در CSS3)

یک شیب رنگ مدوٌر تکرار شونده:

#grad
{
/* For Safari */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Opera 11.1 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%);
}
خودتان امتحان کنید »

آموزش صوتی CSS3

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه