Gradients (گرادینت) در CSS به شما این قابلیت را می دهد تا انتقال های روان بین دو یا چند رنگ مشخص شده را نمایش دهید. در این مقاله قصد داریم Gradients در CSS را به طور کامل آموزش دهیم، همراه داتیس نتورک باشید.
Gradients در CSS
Gradients (گرادینت) در CSS به شما این قابلیت را می دهد تا انتقال های روان بین دو یا چند رنگ مشخص شده را نمایش دهید.
در CSS گرادینت شامل دو نوع است:
- LinearGradients (پایین / بالا / چپ / راست / مورب پایین می رود)
- RadialGradients (توسط مرکز آن تعریف است)
تابع Linear Gradients در CSS
ما با استفاده از این تابع می توانیم در CSS یک شیب خطی با استفاده از دو یا چندین رنگ ایجاد کنیم.
خود شما صد در صد تا الان مشاهده کرده اید که بعضی از پس زمینه های رنگی از ترکیب چندین رنگ به وجود آمده اند برای مثال از مخلوط کردن قرمز و نارنجی می توان یک زمینه رنگی زیبا برای پس زمینه یک عنصر ایجاد کرد.
با استفاده از جهت های بالا – راست – پایین و چپ و یا با استفاده از زوایه ( angle ) مثلا ۴۵deg ( یعنی زاویه ۴۵ درجه ) میتوان جهت پاشیده شدن رنگ را مشخص و یا تعریف نمود.
مثال:
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Gradients در CSS با استفاده از چندین توقف رنگی
در زیر یک مثال آورده شده است که در آن یک شیب خطی (گرادینت) از بالا به پایین با چندین توقف رنگی نمایش داده می شود.
مثال:
#grad {
background-image: linear-gradient(red, yellow, green);
}
در زیر یک مثال دیگر آورده شده است که در آن نحوه ایجاد یک شیب خطی یا همان گرادینت از چپ به راست با رنگ های رنگین کمان و در آن برخی از متن ها را نمایش می دهد.
مثال:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
استفاده از شفافیت
Gradients در CSS این امکان را به ما می دهد که شفافیت ها را کنترل کنیم.
برای افزودن شفافیت ، از rgba () استفاده می کنیم. آخرین پارامتر در rgba () می تواند مقداری از 0 تا 1 باشد و شفافیت رنگ را تعریف می کند: 0 نشان دهنده شفافیت کامل ، 1 نشان دهنده رنگ کامل (بدون شفافیت) است.
مثال زیر یک شیب خطی یا یک گرادینت را نشان می دهد که از سمت چپ شروع می شود. این کاملا شفاف شروع می شود ، و به قرمز کامل تغییر می کند.
مثال:
#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%);
}
امیدوارم این مقاله برایتان مفید بوده باشد.
داتیس نتورک را در شبکه های اجتماعی دنبال کنید.
