گرادینت مخروطی در CSS

گرادینت مخروطی یک گرادینت با انتقال رنگ است که حول یک نقطه مرکزی می چرخد.

برای ساختن یک گرادینت مخروطی باید حداقل دو رنگ تعریف کنیم.

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

به طور پیشفرض، زاویه 0 درجه، و موقعیت مرکز است.

اگر درجه ای مشخص نشده باشد، رنگ ها به طور مساوی در اطراف نقطه مرکزی پخش می شوند.

گرادینت مخروطی: استفاده از سه رنگ

مثال زیر یک گرادینت مخروطی با سه رنگ را نشان می دهد:

<!DOCTYPE html>
<html dir="rtl"">
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>گرادینت مخروطی-سه رنگ</h1>

<div id="grad1"></div>

</body>
</html>

گرادینت مخروطی: استفاده از پنج رنگ

مثال زیر یک گرادینت مخروطی با پنج رنگ را نشان می دهد:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad2 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>

<h1>گرادینت مخروطی-پنج رنگ</h1>

<div id="grad2"></div>

</body>
</html>

گرادینت مخروطی: استفاده از سه رنگ و درجه

مثال زیر یک گرادینت مخروطی با سه رنگ و یک درجه برای هر رنگ را نشان می دهد:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad3 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>

<h1>گرادینت مخروطی - درجه تعریف شده برای هر رنگ</h1>

<div id="grad3"></div>

</body>
</html>

ایجاد نمودارهای دایره ای

فقط border-radius: 50% را اضافه می کنیم، برای اینکه گرادینت مخروطی شبیه دایره شود:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad4 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>گرادینت مخروطی - نمودار دایره ای</h1>

<div id="grad4"></div>

</body>
</html>

در اینجا نمودار دایره ای دیگری با درجات تعریف شده برای همه رنگ ها را مشاهده می کنیم:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad5 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>گرادینت مخروطی - نمودار دایره ای</h1>

<div id="grad5"></div>

</body>
</html>

گرادینت مخروطی با زاویه مشخص شده

زاویه [from angle]، زاویه ای را مشخص می کند که کل گرادینت مخروطی توسط آن چرخانده می شود.

مثال زیر یک گرادینت مخروطی با زاویه از 90 درجه را نشان می دهد:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad6 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>گرادینت مخروطی - با استفاده از یک from angle</h1>

<div id="grad6"></div>

</body>
</html>

گرادینت مخروطی با موقعیت مرکزی مشخص شده

[at position] مرکز گرادینت مخروطی را مشخص می کند.

مثال زیر یک گرادینت مخروطی با موقعیت مرکزی 60٪ 45٪ را نشان می دهد:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad7 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>گرادینت مخروطی -  موقعیت مرکزی مشخص شده</h1>

<div id="grad7"></div>

</body>
</html>

گرادینت مخروطی تکراری

می توان ازتابع ()repeating-conic-gradient برای تکرار شیب های مخروطی استفاده کرد:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad8 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>گرادینت مخروطی تکراری</h1>

<div id="grad8"></div>

</body>
</html>

در اینجا یک گرادینت مخروطی تکراری با شروع رنگ و توقف رنگ را مشاهده می کنیم:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad9 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1> گرادینت مخروطی تکراری با شروع رنگ و توقف رنگ </h1>

<div id="grad9"></div>

</body>
</html>

تابع های گرادینت در CSS

در جدول زیرمی توانیم فهرست توابع گرادینت در CSS را کنیم:

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

خلاصه درس

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

استفاده از سه رنگ
استفاده از پنج رنگ
استفاده از سه رنگ و درجه
استفاده از border-radius: 50%
استفاده از درجات تعریف شده برای همه رنگ ها
استفاده از زاویه مشخص شده
استفاده از موقعیت مرکزی مشخص شده
گرادینت مخروطی تکراری
گرادینت مخروطی تکراری با شروع رنگ و توقف رنگ

آشنا شدیم.

تمرین

مشاهده پاسخ

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

احسان اسلامی

گرادینت مخروطی در CSS