تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (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%);
}
خودتان امتحان کنید »

دیدگاه‌ها  

+3 # sajad 1395-07-21 20:26
با سلام و خسته نباشید
دوستان یه سوال برام پیش اومده
ایا امکان داره کدی بنویسیم که وقتی موس روی متن میره رنگ متن بین حالت اول خودش و یه رنگ دیگه چرخش دارشته باشه مثلا وقتی موس روی متن رفت رنگ متن از سفید به قرمز و دوباره از قرمز به حالت اول خودش یعنی سفید برگرده
البته میخام بدونم ک در css چطور نوشته میشه و اگر در این زبان امکان همچنین چیزی نیست بهم اطلاع بدین منتظر جواب هستم هرچه زودتر پاسخ بدین ممنون میشم
ممنون از همه دوستان بیاموزیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-07-21 21:37
با سلام و تشکر.
من همچین چیزی ندیدم تو CSS. با جاوااسکریپت شدنی هست، ولی با CSS رو اطلاعی ندارم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # sajad 1395-07-21 21:57
به نقل از مهرداد صلاحی:
با سلام و تشکر.
من همچین چیزی ندیدم تو CSS. با جاوااسکریپت شدنی هست، ولی با CSS رو اطلاعی ندارم.

ممنون از پاسختون بنده هم قبلا در منوی یک سایت دیده بودم میخواستم بدونم با چه زبانی هستش از راهنماییتون متشکرم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-07-21 22:03
خواهش میکنم.
باید ببینم، ولی اصولا با زبان جاوااسکریپت یا jQuery و در مواردی Angular میشه این موارد رو پیاده سازی کرد. بهترین و ساده‌ترینش همون jQuery هست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # hamid fa 1394-07-20 17:21
یکی از کامل ترین آموزش هایی که در بخش css و css3 این جا تو این سایت دیدم همین بخش Gradient ها بود خیلی فوق العاده بود واسه یه تغییر کاملا جزیی و سطحی مثال آورده شده بود و این طور کسانی که میخوان css رو فرا بگیرن خیلی راحت میتونن اغییرات جزیی رو هم ببینن به نظر من مدیر عزیر از این به بعد سعی کن واسه ی تغییرات کاملا جزیی هم مثال بیاری که خوب مطالب برای کسانی که تازه کارن جا بیوفته و بتونن کاملا درک کنن
عالی هست سایتتون به امد موفقیت روز افزون این سایت و تموم کاربان گل و عزیزش
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهدی ربانی 1394-01-27 19:36
در بعضی از این مثال ها چرا مقادیر startfrom ها برای هر مرورگر فرق می کنه؟ شما اشتباه نوشتید یا باید همینطور باشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-01-28 09:29
دوست عزیز از startfromها برای ایجاد شیب رنگ خطی مورب استفاده می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهدی ربانی 1394-01-28 10:45
می دونم. میخوام بدونم چرا این مقادیر برای مرورگر های مختلف متفاوته؟#grad
{
background: -webkit-linear- gradient(left top, red , blue); /* For Safari */
background: -o-linear-gradi ent(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gra dient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1394-01-30 09:27
بله حق با شماست، در واقع تنظیم شیب رنگ در مرورگرهای قدیمی در مقابل مرورگرهای جدید کمی متفاوت است.
بعنوان مثال در بعضی از مرورگرهای قدیمی، 0 درجه از چپ به راست است و برای محاسبه ی زاویه، باید برعکس عقربه های ساعت بچرخیم. ولی در مرورگرهای جدید درجه 0 از پایین به بالا است و برای محاسبه ی زاویه، باید در جهت عقربه های ساعت بچرخیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # raghb 1393-12-20 11:40
واقعا زیبا بود وکامل مثال زده بودید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مجتبی آخوندی 1393-10-18 10:14
خیلی زیباست/ ممنون از آموزشتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

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

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

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