گرادینت مخروطی در 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 را کنیم:

توابع	توضیحات
گرادینت مخروطی [()conic-gradient]	یک گرادینت مخروطی ایجاد می کند. حداقل دو رنگ را تعریف کنید. (در اطراف یک نقطه مرکزی)
گرادینت خطی [()linear-gradient]	یک گرادینت خطی ایجاد می کند. حداقل دو رنگ (از بالا به پایین) تعریف کنید.
گرادینت شعاعی[()radial-gradient]	یک گرادینت شعاعی ایجاد می کند. حداقل دو رنگ (مرکز تا لبه) را تعریف کنید.
گرادینت مخروطی تکراری [()repeating-conic-gradient]	یک گرادینت مخروطی را تکرار می کند.
گرادینت خطی تکراری[()repeating-linear-gradient]	یک گرادینت خطی را تکرار می کند.
گرادینت شعاعی تکراری [()repeating-radial-gradient]	یک گرادینت شعاعی را تکرار می کند.

در این درس با گرادینت های مخروطی (conic geradient) در CSS:

آشنا شدیم.

قبلی خانه

توسعه دهندگان

احسان اسلامی