گرادیان ها (Gradients)
«گرادیان (Gradient)» یعنی گذر نرم بین چند رنگ. در CSS این گذر داخل یک المان رسم می شود. بنابراین پس زمینه ها زنده و چشم گیر می شوند.
انواع گرادیان در CSS
سه نوع داریم: خطی (Linear) در یک خط، شعاعی (Radial) از مرکز به بیرون، و مخروطی (Conic) دور یک نقطه. این توابع را داخل ویژگی background-image می نویسیم.
linear-gradient() — جهت های آماده
گرادیان خطی در یک راستا تغییر رنگ می دهد. می تواند عمودی، افقی یا مورب باشد.
#grad {
background-image: linear-gradient(to bottom, red, yellow);
}
#grad {
background-image: linear-gradient(to top, red, yellow);
}
#grad {
background-image: linear-gradient(to right, red, yellow);
}
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
linear-gradient() — تعیین زاویه
برای کنترل بیشتر، زاویه بده. 0deg یعنی به بالا، 90deg یعنی به راست، 180deg یعنی به پایین، و 270deg یعنی به چپ.
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
linear-gradient() — ایستگاه های رنگ بیشتر
می توانی بیش از دو رنگ بدهی. ایستگاه رنگ یعنی توقف های تغییر رنگ.
#grad {
background-image: linear-gradient(red, yellow, green);
}
#grad {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
linear-gradient() — شفافیت با RGBA
برای محو شدن، از rgba() استفاده کن. پارامتر آخر «آلفا» است و شفافیت را می گوید.
#grad {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
repeating-linear-gradient() — تکرار الگو
برای نوارهای تکراری از تابع تکرارشونده استفاده کن.
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
نکته: گرادیان ها را همیشه در background-image بنویس. حداقل دو رنگ لازم است.
گام های عملی سریع
- یک div بساز و کلاس بده.
- در CSS یک
linear-gradient()تنظیم کن. - زاویه یا جهت را تغییر بده و نتیجه را ببین.
برای رنگ ها به رنگ ها برو. همچنین کلیدواژه ها در کلیدواژه های رنگ توضیح دارند. درباره اندازه تصویر، بخش اندازه پس زمینه را ببین.
جمع بندی سریع
- گرادیان یعنی گذر نرم بین رنگ ها.
- سه نوع: خطی، شعاعی، مخروطی.
- جهت را متن یا زاویه بده.
- RGBA محوشدن می سازد.
- تکرارشونده برای الگوهای راه راه.