سلام دوستان عزیز ، حال شماخوبه ؟ امیدوارم که همیشه شاد باشید و سلامت .امروز میخوام درمورد شیب رنگ یا گرادیان توضیح بدم .این خاصیت به طراح وب امکان می دهد انتقالی ملایم (سلیس و روان) بین رنگ ها را تجربه کرده و نمایش دهد.
در ویرایش های پیشین CSS طراح مجبور به استفاده از تصویر برای این منظور بود. اکنون می توان با بهره گیری از شیب رنگ در CSS3 زمان دانلود را کاهش داده و در مصرف پهنای باند صرفه جویی کرد. علاه بر این المان هایی که با گرادیان طراحی شده باشند هنگامی که آن ها را بزرگ نمایی می کنید, جلوه ی بهتری خواهند داشت, زیرا که گرادیان توسط خود مرورگر تولید و تنظیم می شود.
CSS3 در کل دو نوع گرادیان مختلف تعریف می کند:
Linear Gradients (شیب رنگ یا گرادیان خطی): به صورت دو یا چند رنگ، پشت سر هم به حالت افقی، عمودی یا مورب (اریب)
Radial Gradient (گرادیان مدور / تابشی): به صورت دو یا چند رنگ تو در تو به صورت مدوّر (دایره گونه)
در جدول زیر اسم و ورژن مرورگرهایی که از این ویژگی پشتیبانی می کنند آورده شده:
Property
IE
Chrome
Firefox
Safari
Opera
linear-gradient
۱۰٫۰
۲۶٫۰
۱۰٫۰ -webkit-
۱۶٫۰
۳٫۶ -moz-
۶٫۱
۵٫۱ -webkit-
۱۲٫۱
۱۱٫۱ -o-
radial-gradient
۱۰٫۰
۲۶٫۰
۱۰٫۰ -webkit-
۱۶٫۰
۳٫۶ -moz-
۶٫۱
۵٫۱ -webkit-
۱۲٫۱
۱۱٫۶ -o-
repeating-linear-gradient
۱۰٫۰
۲۶٫۰
۱۰٫۰ -webkit-
۱۶٫۰
۳٫۶ -moz-
۶٫۱
۵٫۱ -webkit-
۱۲٫۱
۱۱٫۱ -o-
repeating-radial-gradient
۱۰٫۰
۲۶٫۰
۱۰٫۰ -webkit-
۱۶٫۰
۳٫۶ -moz-
۶٫۱
۵٫۱ -webkit-
۱۲٫۱
۱۱٫۶ -o-
شیب رنگ های خطی Linear Gradients)) CSS3
برای ایجاد گرادیان خطی باید حداقل دو color stop تعریف کنید. color stop در واقع آن رنگ هایی هستند که انتقال ملایم و روان رنگی به رنگی دیگر را امکان پذیر می کند (رنگ هایی هستند که می خواهید در طول Gradient استفاده شوند). همچنین می توان یک نقطه ی شروع و یک جهت یا زاویه (angle/direction) به همراه افکت گرادیان تنظیم کرد. direction جهت شروع شیب رنگ را معین می کند، که یکی از چهار مقدار top, bottom, right و left را می گیرد.
نمونه ی از شیب رنگ خطی:
۲
دستور نحوی (syntax):
background: linear-gradient(direction, color-stop1, color-stop2,…);
شیب رنگ خطی از بالا به پایین (مقدار پیش فرض) / linear gradient top to bottom (default value)
مثال زیر یک گرادیان خطی را نمایش می دهد که از نقطه ی شروع آن از بالا می باشد. با رنگ قرمز شروع شده و کم کم به آبی تبدیل می شود (تغییر رنگ می دهد):
مثال:
#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) – چپ به راست (left to right)
مثال زیر یک گرادیان خطی را نشان می دهد که از سمت چپ آغاز می گردد. با رنگ قرمز شروع شده و به آبی تبدیل می شود:
مثال:
#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) – مورب / اریب (diagonal)
می توان با مشخص کردن هر دو موقعیت شروع افقی و عمودی شیب رنگی اریب ایجاد کرد.
مثال زیر شیب رنگی خطی شروع می کند که از بالا سمت چپ آغاز می گردد (و به پایین سمت راست می رود). با رنگ قرمز شروع می شود و به آبی تبدیل می شود:
مثال:
#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 */
}
استفاده از زاویه (angle)
اگر می خواهید کنترل بیشتری بر روی جهت شیب رنگ داشته باشید, می توانید بجای استفاده از جهت های از پیش تعیین شده یک زاویه تعریف کنید.
دستور نحوی (syntax):
background: linear-gradient(angle, color-stop1, color-stop2);
زاویه ی تعریف شده در واقع به عنوان یک زاویه بین خط افقی و خط گرادیان, در جهت خلاف عقربه ی ساعت عمل می کند. به عبارت دیگر, ۰degیک شیب رنگ از پایین به بالا ایجاد می کند, در حالی که ۹۰deg یک شیب رنگ از چپ به راست ایجاد می کند.
مثال زیر نحوه ی استفاده از زاویه ها را بر روی گرادیان های خطی نمایش می دهد:
مثال:
#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 */
}
استفاده از چندین color stop
مثال زیر نحوه ی تنظیم و مقدار دهی چندین color stop را به طور همزمان نمایش می دهد:
#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 (خاصیت شفافیت)
گرادیان (gradient) های CSS3 همچنین از transparency پشتیبانی می کنند که می توان با بهره گیری از آن ها جلوه های محو شدگی / کم رنگ شدن (fading effect) را ایجاد کرد.
به منظور افزودن خاصیت شفافیت (transparency), لازم است تابع (function) rgba() را برای تعریف color stop ها بکاربرد. آخرین پارامتر در تابع rgba() می تواند مقداری از ۰ تا ۱ باشد, که درجه ی شفافیت (transparency) رنگ مورد نظر را تعریف کند: مقدار ۰ یعنی شفافیت کامل یا %۱۰۰ و مقدار ۱ نمایشگر رنگ %۱۰۰ (بدون transparency یا شفافیت).
مثال زیر یک شیب رنگ خطی (linear gradient) را نشان می دهد که از سمت چپ آغاز می گردد. شیب رنگ کاملاً شفاف شروع می شود و در انتها به رنگ کامل یعنی قرمز پررنگ تبدیل می شود:
مثال:
#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() (تکرار کردن شیب رنگ خطی / 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 (گرادیان مدور / تابشی)
شیب رنگ مدور ((radial gradient بر پایه ی مرکز آن تعریف می شود.
به منظور ایجاد شیب رنگ مدور باید حتماً دو color stop تعریف کنید.
نمونه ای از گرادیان مدور:
۳
دستور نحوی (syntax):
background: radial-gradient(shape size at position, start-color,…, last-color);
به صورت پیش فرض, شکل یا قالب آن ellipse, اندازه ی آن مقدار farthest-corner و موقعیت آن center است.
startfrom: مرکز شیب رنگ (چهار جهت اصلی/چهار جهت فرعی/مقدار center)
shaple: شکل شیب رنگ (circle/ellipse: بیضی / دایره)
size: اندازه شیب رنگ
شیب رنگ مدور – درصد پیشرفت رنگ یکسان (این مقدار پیشفرض است) / با color stop هایی که فاصله ی بین آن ها مساوی است
مثال:
#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 */
}
Radial gradint (گرادیان مدور) – درصد پیشرفت رنگ متفاوت / با color stop هایی که فاصله ی بین آن ها یکسان نیست
مثال:
#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 */
}
تنظیم شکل (set shape)
پارامتر shape, در واقع شکل شیب رنگ (gradient) را تعیین می کند. مقدار پیش فرض (default value) برای آن بیضی (ellipse) می باشد.
مثال:
زیر کد را برای شیب رنگ مدور (radial gradient) که شکل آن دایره مقداردهی و تعریف شده باشد را مشاهده می کنید:
#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)
تابع (function) 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%);
}
