گرادیانت در CSS3
یادگیری CSSگرادیانت در css3 به شما این امکان را می دهد که طیف آرامی از تغییر بین دو یا چند رنگ مشخص را ایجاد کنید.
قبلا برای استفاده از این جلوه باید از تصاویر استفاده می کردیم. اما با گرادیانت css3 می توانید با عدم استفاده از تصاویر ، سرعت بارگزاری و مصرف حجم را در وب سایت کاهش دهید. به علاوه عناصر دارای گرادیانت در بزرگنمایی ها بهتر نمایش داده می شوند چون گرادیانت را مرورگر ایجاد می کند.
در css3 دو نوع گرادیانت تعریف می شود :
- گرادیانت خطی ( به سمت بالا و پایین و چپ و راست یا مورب)
- گرادیانت حلقه ای ( تعیین با نقطه مرکزی )
پشتیبانی مرورگر
اعداد داخل جدول نشان دهنده اولین نسخه از همان مرورگر است که می تواند از صفت گرادیانت پشتیبانی کند.
اعدادی که در کنار آنها -webkit- ، -moz- یا -o- نوشته شده است اولین نسخه از همان مرورگر است که با profix کار می کند.
10.0 -webkit-
3.6 -moz-
5.1 -webkit-
11.1 -o-
10.0 -webkit-
3.6 -moz-
5.1 -webkit-
11.6 -o-
10.0 -webkit-
3.6 -moz-
5.1 -webkit-
11.1 -o-
10.0 -webkit-
3.6 -moz-
5.1 -webkit-
11.6 -o-
گرادیانت های خطی css3
برای تعیین گرادیانت خطی باید حداقل دو ایستگاه رنگی انتخاب کنید. ایستگاه رنگی ، رنگ هایی است که می خواهید بین آن ها طیف رنگی نرمی ایجاد شود. همچنین می توانید یک نقطه شروع و یک جهت (یا یک زاویه) برای گرادیانت تعیین کنید.
ترکیب کد :
;background: linear-gradient(direction, color-stop1, color-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(angle, color-stop1, color-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%);
}
مشاهده مثال
نظر شما
>