گرادینت در 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)

آشنا شدیم.

توسعه دهندگان
احسان اسلامی