گرادینت ها در CSS
گرادینت ها، امکان ایجاد طیف رنگی را می دهند.
گرادینت ها می توانند از دو یا چند رنگ تشکیل شوند.
در CSS، سه نوع گرادینت داریم:
- گرادینت خطی (linear gradient): طیف رنگ خطی می سازد.
- گرادینت شعاعی (radial gradient): طیف رنگ دایره ای در مسیر شعاع می سازد.
- گرادینت مخروطی (conic gradient): طیف رنگی حول یک نقطه مرکزی، چرخانده می شود.
نکته: گرادینت تصویر است و رنگ نیست. به همین دلیل در ویژگی هایی مانند color، نمی توان از آن استفاده کرد.
نکته: می توان با استفاده از ویژگی background-size برای گرادینت ها، اندازه تعریف کرد.
گرادینت خطی در CSS
گرادینت خطی (linear gradient)، یک طیف رنگ خطی می سازد.
background-image: linear-gradient(direction|angle, color-stop1, color-stop2, ...);background-image: linear-gradient(#00ad19, #003008);نکته: برای اطلاعات بیشتر، به آموزش گرادینت خطی در CSS مراجعه کنید.
گرادینت شعاعی در CSS
گرادینت شعاعی (radial gradient)، یک طیف رنگ دایره ای در مسیر شعاع می سازد.
background-image: radial-gradient(shape|size|position, color-stop1, color-stop2);background-image: radial-gradient(#f00, #0f0, #00f);نکته: برای اطلاعات بیشتر، به آموزش گرادینت شعاعی در CSS مراجعه کنید.
گرادینت مخروطی در CSS
گرادینت مخروطی (conic gradient)، یک طیف رنگی را حول یک نقطه مرکزی، می چرخاند.
background-image: conic-gradient(from angle|at position, color-stop1, color-stop2);background-image: conic-gradient(#f00, #0f0, #00f);نکته: برای اطلاعات بیشتر، به آموزش گرادینت مخروطی در CSS مراجعه کنید.
تابع های گرادینت در CSS
در جدول زیرمی توانیم فهرست توابع گرادینت در CSS را کنیم:
| توابع | توضیحات |
|
گرادینت خطی linear-gradient() |
یک گرادینت خطی ایجاد می کند. حداقل دو رنگ (از بالا به پایین) تعریف کنید. |
| گرادینت خطی تکراری repeating-linear-gradient() | یک گرادینت خطی را تکرار می کند. |
| گرادینت شعاعی radial-gradient() |
یک گرادینت شعاعی ایجاد می کند. حداقل دو رنگ (مرکز تا لبه) را تعریف کنید. |
| گرادینت شعاعی تکراری repeating-radial-gradient() | یک گرادینت شعاعی را تکرار می کند. |
| گرادینت مخروطی conic-gradient() |
یک گرادینت مخروطی ایجاد می کند. حداقل دو رنگ را تعریف کنید. (در اطراف یک نقطه مرکزی) |
| گرادینت مخروطی تکراری repeating-conic-gradient() | یک گرادینت مخروطی را تکرار می کند. |
خلاصه درس
در این درس با گرادینت ها (geradient) در CSS:
- گرادینت خطی (linear geradient)
- گرادینت شعاعی (radial geradient)
- گرادینت مخروطی (conic geradient)
آشنا شدیم.
احسان اسلامی
