با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. روش های رنگ آمیزی عناصر HTML که تاکنون ارائه کردیم در هر صورت یک رنگ یکنواخت را در پس زمینه ی عناصر HTML اعمال می کنند، اما در مواردی ممکن است شما بخواهید این رنگ یکنواخت نبوده و به تدریج به رنگ دیگری تبدیل شود. برای اینگونه موارد ویژگی Gradient در CSS ارائه شده است، با استفاده از این ویژگی شما می توانید دو یا چند رنگ مختلف را در پس زمینه ی عناصر خود تعریف کرده و همچنین شکل پراکندگی رنگ ها و حالات مختلف قرار گیری رنگ ها در پس زمینه را تعیین کنید. در ادامه این بخش ما به طور کامل به آموزش ویژگی Gradient در CSS پرداخته ایم.
در این آموزش ما شما را با ساختار کلی کار با Gradient در CSS و جزئیات آن آشنا می کنیم.
Gradient در CSS اجازه ی استفاده از ترکیبات رنگی بدون مرز مشخص و با استایل ها مختلف را می دهد.
به طور کلی CSS شامل دو نوع Gradient است:
برای استفاده از قابلیت linear gradient حداقل باید دو رنگ متفاوت در Style عنصر تعریف کنید.
شما همچنین می توانید نقطه شروع و جهت (یا زاویه) همراه با اثر گرادیان را تنظیم کنید.
ساختار :
Linear Gradient (حالت پیش فرض)
مثال زیر یک linear gradient را نشان می دهد که از بالا شروع می شود، شروع آن به رنگ قرمز بوده و به رنگ زرد متمایل می شود.
1 2 3 | #grad { background-image: linear-gradient(red, yellow); } |
Linear Gradient – Left to Right (چپ به راست)
مثال زیر یک linear gradient را که از سمت چپ شروع شده و از رنگ قرمز به زرد تبدیل می شود را نشان می دهد:
1 2 3 | #grad { background-image: linear-gradient(to right, red , yellow); } |
حالت مورب حالتی است که رنگ بصورت یکنواخت و افقی یا عمودی شروع شده و ادامه کار انجام می شود.
در مثال زیر رنگ قرمز از بالا و سمت چپ شروع شده و به رنگ زرد در پایین و سمت چپ امتداد می یابد.
1 2 3 | #grad { background-image: linear-gradient(to bottom right, red, yellow); } |
اگر شما می خواهید که کنترل بیشتری روی جهت گیری gradient داشته باشید، شما می توانید از angle (زاویه) به جای جهت های از پیش تعیین شده (to bottom, to top, to right, to left, to bottom right, …) استفاده کنید.
ساختار:
angle در واقع زاویه بین خط افقی و خط gradient را تعیین می کند.
مثال زیر عملکرد angle را در gradient بخوبی نشان می دهد:
1 2 3 | #grad { background-image: linear-gradient(-90deg, red, yellow); } |
مثال زیر چگونگی استفاده از رنگ های چندگانه در یک linear gradient را در حالت top to bottom نشان می دهد:
1 2 3 | #grad { background-image: linear-gradient(red, yellow, green); } |
مثال زیر چگونگی استفاده از رنگ های چندگانه در linear gradient به همراه یک متن روی آن را نشان می دهد:
1 2 3 | #grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } |
gradient همچنین از ویژگی transparency برای ایجاد افکت محوشدگی پشتیبانی می کند.
برای افزودن transparency ما نیاز به استفاده از تابع ()rgba برای تعریف رنگ ها داریم.
آخرین پارامتر تابع ()rgba می تواند مقادیری بین ۰ تا ۱ باشد. و این میزان شفافیت رنگ را مشخص می کند.
مقدار ۰ بیشترین میزان شفافیت و ۱ کمترین میزان شفافیت را ایجاد می کند.
مثال زیر چگونگی استفاده از ویژگی transparency را برای ایجاد یک شفافیت بالا از سمت چپ به راست را نشان می دهد:
1 2 3 | #grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } |
می توانید از تابع () repeating-linear-gradient برای تکرارهای متعدد linear-gradient در یک عنصر استفاده کنید.
1 2 3 | #grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); } |
برای تعریف radial gradient نیز می توانید از رنگ های چندگانه استفاده کنید.
ساختار:
1 | background-image: radial-gradient(shape size at position, start-color, ..., last-color); |
در حالت پیش فرض ، شکل رنگ ها در حالت ellipse است. اندازه farthest-corner بوده و موقعیت آن در مرکز است.
Radial Gradient – حالت پیش فرض
مثال زیر حالت پیش فرض radial gradient را نشان می دهد:
1 2 3 | #grad { background-image: radial-gradient(red, yellow, green); } |
Radial Gradient – تغییر دادن درصد رنگ ها
در این مثال ما درصد هر یک از رنگ های تشکیل دهنده ی radial gradient را تغییر می دهیم:
1 2 3 | #grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); } |
پارامتر shape شکل radial gradient را توصیف می کند، که می تواند مقادیر circle یا ellipse را بگیرد.
پیش فرض این مقدار ellipse است.
مثال زیر حالت circle را در radial gradient نشان می دهد:
1 2 3 | #grad { background-image: radial-gradient(circle, red, yellow, green); } |
پارامتر size اندازه ی gradient را مشخص می کند که می تواند شامل ۴ مقدار زیر باشد:
1 2 3 4 5 6 7 | #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); } |
با استفاده از تابع ()repeating-radial-gradient می توانید radial gradient های متعدد را تکرار کنید.
1 2 3 | #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;
محمد
عکاسی و کامل