گرادینت مخروطی در CSS
گرادینت مخروطی یک گرادینت با انتقال رنگ است که حول یک نقطه مرکزی می چرخد.
برای ساختن یک گرادینت مخروطی باید حداقل دو رنگ تعریف کنیم.
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
به طور پیشفرض، زاویه 0 درجه، و موقعیت مرکز است.
اگر درجه ای مشخص نشده باشد، رنگ ها به طور مساوی در اطراف نقطه مرکزی پخش می شوند.
گرادینت مخروطی: استفاده از سه رنگ
مثال زیر یک گرادینت مخروطی با سه رنگ را نشان می دهد:
background-image: conic-gradient(red, yellow, green);
گرادینت مخروطی: استفاده از پنج رنگ
مثال زیر یک گرادینت مخروطی با پنج رنگ را نشان می دهد:
background-image: conic-gradient(red, yellow, green, blue, black);
گرادینت مخروطی: استفاده از سه رنگ و درجه
مثال زیر یک گرادینت مخروطی با سه رنگ و یک درجه برای هر رنگ را نشان می دهد:
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
ایجاد نمودارهای دایره ای
فقط border-radius: 50% را اضافه می کنیم، برای اینکه گرادینت مخروطی شبیه دایره شود:
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
در اینجا نمودار دایره ای دیگری با درجات تعریف شده برای همه رنگ ها را مشاهده می کنیم:
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
گرادینت مخروطی با زاویه مشخص شده
زاویه [from angle]، زاویه ای را مشخص می کند که کل گرادینت مخروطی توسط آن چرخانده می شود.
مثال زیر یک گرادینت مخروطی با زاویه از 90 درجه را نشان می دهد:
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
گرادینت مخروطی با موقعیت مرکزی مشخص شده
[at position] مرکز گرادینت مخروطی را مشخص می کند.
مثال زیر یک گرادینت مخروطی با موقعیت مرکزی 60٪ 45٪ را نشان می دهد:
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
گرادینت مخروطی تکراری
می توان ازتابع ()repeating-conic-gradient برای تکرار شیب های مخروطی استفاده کرد:
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
در اینجا یک گرادینت مخروطی تکراری با شروع رنگ و توقف رنگ را مشاهده می کنیم:
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
تابع های گرادینت در CSS
در جدول زیرمی توانیم فهرست توابع گرادینت در CSS را کنیم:
توابع |
توضیحات |
گرادینت مخروطی [()conic-gradient] |
یک گرادینت مخروطی ایجاد می کند. حداقل دو رنگ را تعریف کنید. (در اطراف یک نقطه مرکزی) |
گرادینت خطی [()linear-gradient] |
یک گرادینت خطی ایجاد می کند. حداقل دو رنگ (از بالا به پایین) تعریف کنید. |
گرادینت شعاعی[()radial-gradient] |
یک گرادینت شعاعی ایجاد می کند. حداقل دو رنگ (مرکز تا لبه) را تعریف کنید. |
گرادینت مخروطی تکراری [()repeating-conic-gradient] | یک گرادینت مخروطی را تکرار می کند. |
گرادینت خطی تکراری[()repeating-linear-gradient] | یک گرادینت خطی را تکرار می کند. |
گرادینت شعاعی تکراری [()repeating-radial-gradient] | یک گرادینت شعاعی را تکرار می کند. |
خلاصه درس
در این درس با گرادینت های مخروطی (conic geradient) در CSS:
- استفاده از سه رنگ
- استفاده از پنج رنگ
- استفاده از سه رنگ و درجه
- استفاده از border-radius: 50%
- استفاده از درجات تعریف شده برای همه رنگ ها
- استفاده از زاویه مشخص شده
- استفاده از موقعیت مرکزی مشخص شده
- گرادینت مخروطی تکراری
- گرادینت مخروطی تکراری با شروع رنگ و توقف رنگ
آشنا شدیم.