سی‌اس‌اس/گرادیان

پس‌زمینه

گرادیان

فونت

سی‌اس‌اس

مقدمه

گرادینت (Gradient) در CSS به معنای ایجاد یک طیف رنگی پیوسته بین دو یا چند رنگ است. این ویژگی به طراحان امکان می‌دهد که بدون نیاز به تصاویر، پس‌زمینه‌هایی زیبا و انعطاف‌پذیر ایجاد کنند.

گرادینت‌ها در CSS معمولاً در ویژگی background-image استفاده می‌شوند و انواع مختلفی دارند که از جمله می‌توان به گرادینت خطی (linear-gradient)، گرادینت شعاعی (radial-gradient)، و گرادینت مخروطی (conic-gradient) اشاره کرد.

انواع گرادینت‌ها

۱. گرادینت خطی (linear-gradient)

این نوع گرادینت، رنگ‌ها را در یک خط مستقیم از یک رنگ به رنگ دیگر تغییر می‌دهد.

سینتکس

background-image: linear-gradient([زاویه یا جهت], رنگ۱, رنگ۲, ...);

مثال

background-image: linear-gradient(to right, red, orange, yellow);

نکات

• جهت می‌تواند `to right`, `to bottom left`, یا عددی مانند `45deg` باشد.
• تعداد رنگ‌ها می‌تواند بیشتر از دو باشد.
• می‌توان درصد یا محل توقف (stop points) مشخص کرد:

linear-gradient(to right, red 0%, yellow 50%, green 100%)

---

۲. گرادینت شعاعی (radial-gradient)

این گرادینت از یک نقطه شروع شده و به صورت دایره‌ای یا بیضی به سمت بیرون گسترش می‌یابد.

سینتکس

background-image: radial-gradient([شکل و مکان شروع], رنگ۱, رنگ۲, ...);

مثال

background-image: radial-gradient(circle, blue, lightblue, white);

گزینه‌ها

• اشکال: `circle`, `ellipse`
• مکان شروع: `at center`, `at top left`, `at 20% 30%`

---

۳. گرادینت مخروطی (conic-gradient)

در این نوع گرادینت، رنگ‌ها به صورت دایره‌ای و چرخشی از یک نقطه مرکزی پخش می‌شوند.

سینتکس

background-image: conic-gradient([from زاویه] [at موقعیت], رنگ‌ها);

مثال

background-image: conic-gradient(from 0deg at center, red, yellow, green, red);

نکات

• از CSS Level 4 پشتیبانی می‌شود.
• برای ساخت چارت یا نمودارهای دایره‌ای بسیار کاربردی است.

مقایسه انواع گرادینت

نوع گرادینت	جهت انتشار	شکل	کاربرد رایج
linear-gradient	خطی (زاویه‌ای)	خط مستقیم	پس‌زمینه، دکمه‌ها
radial-gradient	از مرکز به بیرون	دایره یا بیضی	افکت نور یا روشنایی
conic-gradient	چرخشی دور مرکز	دایره‌ای (360 درجه)	نمودار، ساعت، چرخ رنگ

گرادینت تکرارشونده

برای ساخت الگوهای راه‌راه یا تکرارشونده، می‌توان از گرادینت‌های تکرارشونده استفاده کرد:

background-image: repeating-linear-gradient(45deg, #000, #000 10px, #fff 10px, #fff 20px);

استفاده از opacity در گرادینت

برای ایجاد شفافیت، می‌توان از رنگ‌های RGBA یا HSL با مقدار شفافیت استفاده کرد:

background-image: linear-gradient(to right, rgba(255,0,0,0.5), rgba(255,255,0,0.8));

گرادینت چندلایه

می‌توان چندین گرادینت را در یک عنصر ترکیب کرد:

background-image: 
  linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
  radial-gradient(circle at center, red, blue);

سازگاری مرورگر

مرورگر	پشتیبانی از linear	radial	conic
Chrome	بله	بله	از نسخه 69+
Firefox	بله	بله	از نسخه 83+
Safari	بله	بله	از نسخه 12.1+
Edge	بله	بله	بله

تمرین

یک کادر بسازید که پس‌زمینهٔ آن از آبی به سبز به صورت خطی از بالا به پایین گرادینت داشته باشد و وسط آن نوشته‌ای با رنگ سفید قرار گیرد.

نکات مهم

• گرادینت‌ها تصویر نیستند، بلکه توابع تولید رنگ هستند.
• بهتر است از گرادینت به عنوان جایگزین تصاویر استفاده شود تا حجم صفحات کاهش یابد.
• گرادینت با انیمیشن ترکیب‌پذیر است و می‌تواند افکت‌های چشم‌نوازی ایجاد کند.
• در نسخه‌های قدیمی مرورگرها ممکن است نیاز به پیشوندها باشد (مانند -webkit-)، اما امروزه اغلب نیازی نیست.

کاربرد این صفحه از آموزش css

گرادینت‌ها ابزار قدرتمند و انعطاف‌پذیری برای طراحی مدرن و زیبای صفحات وب هستند. با شناخت انواع آن‌ها و نحوه استفادهٔ درست، می‌توان جلوه‌های بصری حرفه‌ای و واکنش‌گرا ایجاد کرد.