گرادینت مخروطی در CSS
در گرادینت مخروطی، طیف رنگی حول یک نقطه مرکزی می چرخد.
background-image: conic-gradient(from angle|at position, color-stop1, color-stop2);برای ایجاد گرادینت مخروطی باید از:
- زاویه شروع و موقعیت مرکز طیف رنگ (اختیاری)
- حداقل از دو توقف رنگ (color-stop) استفاده کنیم. (اجباری)
نکته: به رنگ هایی که در گرادینت استفاده می شود، توقف های رنگی گفته می شود.
background-image: conic-gradient(#f00, #0f0, #00f);تابع conic-gradient در CSS
در تابع conic-gradient، می توانیم بی نهایت توقف رنگی اضافه کنیم.
background-image: conic-gradient(#f00, #0f0, #00f, #0f0f0f, #00ffff);می توانیم برای هر توقف رنگی درجه ای مشخص کنیم:
background-image: conic-gradient(#f00 45deg, #0f0 90deg, #00f 210deg);گرادینت مخروطی دایره ای در CSS
با ویژگی border-radius: 50%، می توانیم گرادینت مخروطی را دایره شکل کنیم.
background-image: conic-gradient(#f00, #0f0, #00f, #0f0f0f, #00ffff);
border-radius: 50%;با درجه بندی می توانیم شکل هایی مانند زیر درست کنیم:
background-image: conic-gradient(#ff01f4 0deg, #ff01f4 90deg, #b700ff 90deg, #b700ff 180deg, #00ffff 180deg, #00ffff 270deg, #0900ff 270deg);
border-radius: 50%;زاویه ی شروع گرادینت مخروطی در CSS
زاویه شروع گرادینت مخروطی را می توان با کلمه from شروع کرد.
در گرادینت زیر، ما اولین توقف رنگی را از زاویه 90 درجه شروع کرده ایم:
background-image: conic-gradient(from 90deg, #f00, #0f0, #00f);
border-radius: 50%;نکته: زاویه شروع پیش فرض، 0 درجه است.
مرکز گرادینت مخروطی در CSS
موقعیت مرکز گرادینت مخروطی را می توان با کلمه at مشخص کرد.
در گرادینت زیر موقعیت مرکزی 60٪ 45٪ را نشان می دهد:
background-image: conic-gradient(at 60% 45%, #f00, #0f0, #00f);
border-radius: 50%;گرادینت مخروطی تکراری در CSS
تابع repeating-conic-gradient()، برای گرادینت مخروطی تکراری استفاده می شود.
background-image: repeating-conic-gradient(#f00 10%, #0f0 20%);
border-radius: 50%;در اینجا یک گرادینت مخروطی تکراری با شروع رنگ و توقف رنگ را مشاهده می کنیم:
background-image: repeating-conic-gradient(#f00 0deg 10deg, #0f0 10deg 20deg, #00f 20deg 30deg);
border-radius: 50%;خلاصه درس
در این درس با گرادینت های مخروطی (conic geradient) در CSS:
- تابع conic-gradient
- گرادینت مخروطی دایره ای
- زاویه ی شروع گرادینت مخروطی
- مرکز گرادینت مخروطی
- گرادینت مخروطی تکراری
آشنا شدیم.
احسان اسلامی
