گرادیان خطی CSS (Linear Gradients)
تابع های گرادیان (Gradient) در CSS گذار نرم بین چند رنگ را می سازند و معمولاً در ویژگی background-image به کار می روند. در این صفحه روی «گرادیان خطی CSS» تمرکز می کنیم و جهت، زاویه، شفافیت و تکرار را با نمونه ها می بینیم.
تابع linear-gradient() در گرادیان خطی CSS
تابع linear-gradient() یک گرادیان در خط مستقیم ایجاد می کند. دست کم دو ایستگاه رنگ نیاز دارید و می توانید جهت یا زاویه را نیز تعیین کنید.
/* Syntax */
selector { background-image: linear-gradient(<direction-or-angle>, <color-stop1>, <color-stop2>); }نکته: برای مرجع کامل، مستندات گرادیان خطی CSS در MDN را ببینید.
جهت های رایج گرادیان خطی
می توانید جهت را با کلمات کلیدی تعیین کنید؛ مانند بالا، پایین، راست، چپ یا مورب.
/* بالا به پایین (پیش فرض) */
#grad1 { background-image: linear-gradient(to bottom, red, yellow); }
/* پایین به بالا */
#grad2 { background-image: linear-gradient(to top, red, yellow); }
/* چپ به راست */
#grad3 { background-image: linear-gradient(to right, red, yellow); }
/* مورب: بالا-چپ به پایین-راست */
#grad4 { background-image: linear-gradient(to bottom right, red, yellow); }زاویه در گرادیان خطی
برای کنترل دقیق تر، زاویه بدهید. 0deg معادل «به سمت بالا»، 90deg معادل «به سمت راست»، 180deg «به سمت پایین» و 270deg «به سمت چپ» است.
/* استفاده از زاویه */
#grad-angle { background-image: linear-gradient(180deg, red, yellow); }چند ایستگاه رنگ (Multiple Color Stops)
با افزودن ایستگاه های بیشتر، تغییر رنگ ها مرحله ای و کنترل پذیر می شود.
#grad-stops { background-image: linear-gradient(red, yellow, green); }#grad-rainbow { background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); }شفافیت در گرادیان خطی
برای محوشدن تدریجی، ایستگاه ها را با rgba() تعریف کنید و شفافیت را با پارامتر چهارم کنترل کنید.
#grad-alpha { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }repeating-linear-gradient()
برای تکرار الگوی گرادیان از repeating-linear-gradient() استفاده کنید.
#grad-repeat { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }نکته: برای درک تفاوت گرادیان ها به گرادیان شعاعی سر بزنید. همچنین کلیدواژه های رنگ را در کلیدواژه های رنگ مرور کنید. اگر به دنبال آموزش کامل تر هستید، همین صفحه گرادیان خطی CSS نقطه شروع خوبی است.