گرادینت خطی در CSS
گرادینت خطی یا linear gradient یک طیف رنگ خطی می سازد.
background-image: linear-gradient(direction|angle, color-stop1, color-stop2);برای ایجاد گرادینت خطی باید از:
- جهت یا زاویه طیف رنگ به صورت (اختیاری)
- حداقل از دو توقف رنگ (color-stop) استفاده کنیم. (اجباری)
نکته: به رنگهای که در گرادیانت استفاده می شود، توقف های رنگی گفته می شود.
جهت گرادیانت خطی در CSS
background-image: linear-gradient(#00ad19, #003008);نکته: اگر از جهت طیف رنگی استفاده نکنیم. به صورت پیشفرض از بالا به پایین در نظر گرفته می شود.
برای مشخص کردن جهت (direction) گرادینت می توان از جهت های زیر استفاده کرد.
background-image: linear-gradient(to left top, #00ad19, #003008); // به سمت چپ بالا
background-image: linear-gradient(to top, #00ad19, #003008); // به سمت بالا
background-image: linear-gradient(to right top, #00ad19, #003008); // به سمت راست بالا
background-image: linear-gradient(to right, #00ad19, #003008); // به سمت راست
background-image: linear-gradient(to right bottom, #00ad19, #003008); // به سمت راست پایین
background-image: linear-gradient(to bottom, #00ad19, #003008); // به سمت پایین
background-image: linear-gradient(to left bottom, #00ad19, #003008); // به سمت چپ پایین
background-image: linear-gradient(to left, #00ad19, #003008); // به سمت چپ
مثال زیر یک گرادینت خطی را نشان می دهد که از چپ شروع می شود و از سبز به زرد تبدیل می شود:
background-image: linear-gradient(to right, green , yellow);مسیر مورب
ما می توانیم با مشخص کردن موقعیت های شروع افقی و عمودی، یک گرادینت به صورت مورب ایجاد کنیم.
مثال زیر یک گرادینت خطی را نشان می دهد که از بالا سمت چپ شروع می شود و به پایین سمت راست می رود. از سبز شروع شده و به زرد تبدیل می شود:
background-image: linear-gradient(to bottom right, green, yellow);استفاده از زاویه ها در CSS
اگر بخواهیم کنترل بیشتری بر جهت گرادینت ها داشته باشیم، می توانیم به جای جهت های از پیش تعریف شده ( پایین، بالا، راست، چپ، پایین راست و غیره) یک زاویه تعریف کنیم:
- مقدار 0 درجه معادل "رو به بالا" است.
- مقدار 90 درجه معادل "رو به راست" است.
- مقدار 180 درجه معادل "رو به پایین" است.
مثال زیر نحوه استفاده از زاویه ها در گرادینت های خطی را نشان می دهد:
background-image: linear-gradient(0deg, green, yellow);
background-image: linear-gradient(90deg, green, yellow);
background-image: linear-gradient(180deg, green, yellow);
background-image: linear-gradient(-90deg, green, yellow);استفاده از چندین توقف رنگی در CSS
مثال زیر یک گرادینت خطی (از بالا به پایین) را با توقف های رنگی متعدد نشان می دهد:
background-image: linear-gradient(red, yellow, green);
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
background-image: linear-gradient(red 10%, green 85%, blue 90%);مثال زیر یک گرادینت خطی (از چپ به راست) با رنگ رنگین کمان و مقداری متن را نشان می دهد:
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);استفاده از شفافیت در CSS
گرادینت های CSS همچنین از شفافیت پشتیبانی می کنند که می تواند برای ایجاد جلوه های محو شدن استفاده شود.
برای افزودن شفافیت، از تابع rgba() برای تعریف توقف های رنگ استفاده می کنیم. آخرین پارامتر در تابع rgba() می تواند مقداری از 0 تا 1 باشد و شفافیت رنگ را مشخص می کند: 0 شفافیت کامل را نشان می دهد، 1 نشان دهنده رنگ کامل (بدون شفافیت) است.
مثال زیر یک گرادینت خطی را نشان می دهد که از سمت چپ شروع می شود. کاملا شفاف شروع می شود و به رنگ قرمز کامل تبدیل می شود:
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));استفاده از گرادینت خطی تکراری در CSS
repeating-linear-gradient() برای تکرار گرادینت های خطی استفاده می شود:
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
background-image: repeating-linear-gradient(45deg, red 0px, red 10px, yellow 10px, yellow 20px);خلاصه درس
در این درس با گرادینت های خطی (linear geradient) در CSS:
- استفاده از زاویه ها
- استفاده از چندین توقف رنگ
- استفاده از شفافیت
- استفاده از گرادینت خطی تکراری
آشنا شدیم.
تمرین
احسان اسلامی
