مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. روش های رنگ آمیزی عناصر HTML که تاکنون ارائه کردیم در هر صورت یک رنگ یکنواخت را در پس زمینه ی عناصر HTML اعمال می کنند، اما در مواردی ممکن است شما بخواهید این رنگ یکنواخت نبوده و به تدریج به رنگ دیگری تبدیل شود. برای اینگونه موارد ویژگی Gradient در CSS ارائه شده است، با استفاده از این ویژگی شما می توانید دو یا چند رنگ مختلف را در پس زمینه ی عناصر خود تعریف کرده و همچنین شکل پراکندگی رنگ ها و حالات مختلف قرار گیری رنگ ها در پس زمینه را تعیین کنید. در ادامه این بخش ما به طور کامل به آموزش ویژگی Gradient در CSS پرداخته ایم.
کار با Gradient در CSS
در این آموزش ما شما را با ساختار کلی کار با Gradient در CSS و جزئیات آن آشنا می کنیم.
Gradient در CSS اجازه ی استفاده از ترکیبات رنگی بدون مرز مشخص و با استایل ها مختلف را می دهد.
به طور کلی CSS شامل دو نوع Gradient است:
- Linear Gradients (پایین / بالا / چپ / راست / مورب)
- Radial Gradients (تعریف رنگ ها در شکل مرکزی)
ویژگی Linear Gradient در CSS
برای استفاده از قابلیت linear gradient حداقل باید دو رنگ متفاوت در Style عنصر تعریف کنید.
شما همچنین می توانید نقطه شروع و جهت (یا زاویه) همراه با اثر گرادیان را تنظیم کنید.
ساختار :
background-image: linear-gradient(direction, color-stop1,
color-stop2, …);
Linear Gradient (حالت پیش فرض)
مثال زیر یک linear gradient را نشان می دهد که از بالا شروع می شود، شروع آن به رنگ قرمز بوده و به رنگ زرد متمایل می شود.
مثال : حالت ساده gradient
| #grad { background-image: linear-gradient(red, yellow); } |
Linear Gradient – Left to Right (چپ به راست)
مثال زیر یک linear gradient را که از سمت چپ شروع شده و از رنگ قرمز به زرد تبدیل می شود را نشان می دهد:
مثال : حالت Left to Right
| #grad { background-image: linear-gradient(to right, red , yellow); } |
حالت diagonal (مورب) در Linear Gradient
حالت مورب حالتی است که رنگ بصورت یکنواخت و افقی یا عمودی شروع شده و ادامه کار انجام می شود.
در مثال زیر رنگ قرمز از بالا و سمت چپ شروع شده و به رنگ زرد در پایین و سمت چپ امتداد می یابد.
مثال : حالت diagonal
| #grad { background-image: linear-gradient(to bottom right, red, yellow); } |
استفاده از angle (زاویه ها)
اگر شما می خواهید که کنترل بیشتری روی جهت گیری gradient داشته باشید، شما می توانید از angle (زاویه) به جای جهت های از پیش تعیین شده (to bottom, to top, to right, to left, to bottom right, …) استفاده کنید.
ساختار:
background-image: linear-
background-image: linear-gradient(angle, color-stop1,
color-stop2);
angle در واقع زاویه بین خط افقی و خط gradient را تعیین می کند.
مثال زیر عملکرد angle را در gradient بخوبی نشان می دهد:
مثال : تنظیم زاویه
| #grad { background-image: linear-gradient(-90deg, red, yellow); } |
استفاده از رنگ های چندگانه
مثال زیر چگونگی استفاده از رنگ های چندگانه در یک linear gradient را در حالت top to bottom نشان می دهد:
مثال : استفاده از چندین رنگ زمینه
| #grad { background-image: linear-gradient(red, yellow, green); } |
مثال زیر چگونگی استفاده از رنگ های چندگانه در linear gradient به همراه یک متن روی آن را نشان می دهد:
مثال : چندین رنگ زمینه با متن
| #grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } |
ویژگی Transparency (شفافیت)
gradient همچنین از ویژگی transparency برای ایجاد افکت محوشدگی پشتیبانی می کند.
برای افزودن transparency ما نیاز به استفاده از تابع ()rgba برای تعریف رنگ ها داریم.
آخرین پارامتر تابع ()rgba می تواند مقادیری بین ۰ تا ۱ باشد. و این میزان شفافیت رنگ را مشخص می کند.
مقدار ۰ بیشترین میزان شفافیت و ۱ کمترین میزان شفافیت را ایجاد می کند.
مثال زیر چگونگی استفاده از ویژگی transparency را برای ایجاد یک شفافیت بالا از سمت چپ به راست را نشان می دهد:
مثال : ویژگی transparency
| #grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } |
تکرار linear-gradient در یک عنصر
می توانید از تابع () repeating-linear-gradient برای تکرارهای متعدد linear-gradient در یک عنصر استفاده کنید.
مثال : تکرار رنگ ها در linear-gradient
| #grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); } |
Radial Gradient
برای تعریف radial gradient نیز می توانید از رنگ های چندگانه استفاده کنید.
ساختار:
مثال :
| background-image: radial-gradient(shape size at position, start-color, ..., last-color); |
در حالت پیش فرض ، شکل رنگ ها در حالت ellipse است. اندازه farthest-corner بوده و موقعیت آن در مرکز است.
Radial Gradient – حالت پیش فرض
مثال زیر حالت پیش فرض radial gradient را نشان می دهد:
مثال : حالت پیش فرض gradient-radial
| #grad { background-image: radial-gradient(red, yellow, green); } |
Radial Gradient – تغییر دادن درصد رنگ ها
در این مثال ما درصد هر یک از رنگ های تشکیل دهنده ی radial gradient را تغییر می دهیم:
مثال : تنظیم درصدی رنگ های gradient-radial
| #grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); } |
تنظیم شکل radial gradient
پارامتر shape شکل radial gradient را توصیف می کند، که می تواند مقادیر circle یا ellipse را بگیرد.
پیش فرض این مقدار ellipse است.
مثال زیر حالت circle را در radial gradient نشان می دهد:
مثال : مات کردن مرز رنگ های زمینه
| #grad { background-image: radial-gradient(circle, red, yellow, green); } |
کلمات کلیدی تعیین اندازه
پارامتر size اندازه ی gradient را مشخص می کند که می تواند شامل ۴ مقدار زیر باشد:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
مثال : کلمات کلیدی اندازه پس زمینه
| #grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); } #grad2 { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); } |
تکرار radial-gradient
با استفاده از تابع ()repeating-radial-gradient می توانید radial gradient های متعدد را تکرار کنید.
مثال : تکرار رنگ های gradient-radial
| #grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); } |
کلام آخر
اگر می خواهید از رنگ بندی های متنوع و با افکت های محو شدگی در عناصر خود استفاده کنید تا پس زمینه های زیباتر و جذاب تر را ایجاد کنید، کار با Gradient در CSS را به شما پیشنهاد می کنیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
Aria
سلام ادمین جان چطور به فونت ها گرادینت اعمال کنیم؟
پی وی لرن
با سلام
به اینصورت
background: linear-gradient(90deg,#ff8a00,#fe2e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
محمد
عکاسی و کامل