021-20483015

گرادیانت در CSS3

گرادیانت در css3 به شما این امکان را می دهد که طیف آرامی از تغییر بین دو یا چند رنگ مشخص را ایجاد کنید.
قبلا برای استفاده از این جلوه باید از تصاویر استفاده می کردیم. اما با گرادیانت css3 می توانید با عدم استفاده از تصاویر ، سرعت بارگزاری و مصرف حجم را در وب سایت کاهش دهید. به علاوه عناصر دارای گرادیانت در بزرگنمایی ها بهتر نمایش داده می شوند چون گرادیانت را مرورگر ایجاد می کند.
در css3 دو نوع گرادیانت تعریف می شود :
- گرادیانت خطی ( به سمت بالا و پایین و چپ و راست یا مورب)
- گرادیانت حلقه ای ( تعیین با نقطه مرکزی )

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

اعداد داخل جدول نشان دهنده اولین نسخه از همان مرورگر است که می تواند از صفت گرادیانت پشتیبانی کند.
اعدادی که در کنار آنها -webkit- ، -moz-  یا  -o- نوشته شده است اولین نسخه از همان مرورگر است که با profix کار می کند.

صفت
  کروم
  اکسپلورر
  فایرفاکس
  سافاری
  اپرا
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

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

ترکیب کد :

;background: linear-gradient(directioncolor-stop1color-stop2, ...)
مثال گرادیانت خطی بالا به پایین :

گرادیانت خطی
#grad {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow); /* Standard syntax */
}
مشاهده مثال

مثال گرادیانت خطی چپ به راست :

گرادیانت خطی - چپ به راست
#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , yellow); /* Standard syntax */
}
مشاهده مثال

مثال گرادیانت خطی مورب :
می توانید یک گرادیانت مورب را با استفاده از هر دو نقطه شروع عمودی و افقی ایجاد کنید.
مثال زیر گرادیانت خطی با شروع از بالا چپ را نمایش می دهد (که به سمت پایین راست کشیده شده است) و از قرمز آغاز شده و با زرد تمام می شود.

مثال :

گرادیانت خطی - مورب
#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}
مشاهده مثال

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

اگر می خواهید کنترل بیشتری روی جهت گرادیانت داشته باشید می توانید زاویه ای بجای جهت های از پیش تعیین شده  برای آن مشخص  کنید.

ترکیب کد :

;background: linear-gradient(anglecolor-stop1color-stop2)

این زاویه برای گرادیانت نسبت به خط افق تعیین می شود. مثال زیر نحوه استفاده زاویه برای گرادیانت خطی را نمایش می دهد.

مثال :

گرادیانت خطی - زاویه های مختلف
#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}
مشاهده مثال

استفاده از ایستگاه های رنگ متعدد

مثال زیر یک گرادیانت خطی دارای ایستگاه های رنگ متعدد را نشان می دهد.

مثال :

گرادیانت چند رنگی
#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, yellow, green); /* Standard syntax */
}
مشاهده مثال

مثال زیر نحوه ایجاد گرادیانت خطی با رنگ های رنگین کمان و یک متن روی آن را نشان می دهد.

مثال :

پس زمینه گرادیانت خطی چند رنگی با متن
#grad {
  background: red; /* For browsers that do not support gradients */
  /* 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); 
}
مشاهده مثال

استفاده از پشت نمایی در گرادیانت

گرادیانت در css3 از جلوه پشت نمایی (transparency) نیز پشتیبانی می کند و امکان ایجاد جلوه محو شدن رنگ ها را فراهم می آورد.
برای اضافه کردن پشت نمایی از تابع () rgba برای تعیین ایستگاه های رنگ استفاده می شود.آخرین پارامتر در تابع () rgba می تواند مقداری از 0 تا 1 داشته باشد که باعث پشت نمایی رنگ می شود : عدد 0 کاملا پشت نما و عدد 1 رنگ کامل را نمایش می دهد.
مثال زیر گرادیانت خطی را که از چپ شروع می شود نمایش می دهد که با رنگ محو شده آغاز می شود و به رنگ قرمز کاملا شفاف ختم می شود.

مثال :

استفاده از شفافیت در گرادیانت
#grad {
  background: red; /* For browsers that do not support gradients */
  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*/
}
مشاهده مثال

تکرار یک گرادیانت خطی در css3
تکرار یک گرادیانت خطی با استفاده از تابع ()repeating-linear-gradient ایجاد می شود.

مثال :

گرادیانت خطی تکرار شونده
#grad {
  background: red; /* For browsers that do not support gradients */
  /* 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%);
}
مشاهده مثال

گرادیانت های شعاعی  در css3

گرادیانت حلقه ای با نقطه مرکزی آن تعریف می شود. برای ایجاد گرادیانت شعاعی باید حداقل دو ایستگاه رنگ تعیین کنید.

ترکیب کد :

background: radial-gradient(shape size at position, start-color, ..., last-color);
بطور پیش فرض شکل گرادیانت بیضی سایز آن تا دورترین گوشه و موقعیت آن مرکزی است.

گرادیانت شعاعی ب افاصله بندی برابر نقاط توقف رنگی( پیش فرض)

مثال :

گرادیانت شعاعی
#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
  background: radial-gradient(red, yellow, green); /* Standard syntax */
}
مشاهده مثال

گرادیانت شعاعی با فاصله بندی نابرابر نقاط توقف رنگی

مثال :

گرادیانت شعاعی - نا برابر
#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */
  background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
}
مشاهده مثال

تنظیم شکل گرادیانت

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

مثال :

تنظیم شکل گرادیانت
#grad {
  background: red; /* For browsers that do not support gradients */
  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 اندازه گرادیانت را تعیین می کند و می تواند چهار مقدار زیررا دریافت کند :
-closest-side
-farthest-side
-closest-corner
-farthest-corner

مثال :

استفاده از اندازه های مختلف
#grad1 {
  background: red; /* For browsers that do not support gradients */
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black); 
  /* For Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black);
  /* Standard syntax */
  background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black);
  /* Opera 11.6 to 12.0 */ 
  background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
  /* Standard syntax */
  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
مشاهده مثال

تکرار یک گرادیانت شعاعی

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

مثال :

تکرار یک گرادیانت شعاعی
#grad {
  background: red; /* For browsers that do not support gradients */
  /* 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%);
}
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط