گرادیانتها یکی از جذابترین ابزارهای CSS هستند که به شما امکان میدهند پسزمینههایی پویا و چشمنواز بسازید. به جای رنگ ساده، میتوانید تغییر تدریجی بین چند رنگ ایجاد کنید و طراحی صفحه را حرفهایتر کنید.
🔶 گرادیانت چیست؟
گرادیانت یعنی تغییر تدریجی بین دو یا چند رنگ.
مثالها:
- سبز روشن → سفید
- آبی → بنفش
- مورب از گوشه بالا چپ → گوشه پایین راست
🧱 مثال عملی: گرادیانت عمودی در سایدبار
.sidebar {
background-image: linear-gradient(to bottom, #e5e9dc, white);
}
to bottom: جهت گرادیانت از بالا به پایین#e5e9dc: رنگ شروعwhite: رنگ پایانی
🧭 تغییر جهت گرادیانت
to right→ از چپ به راستto bottom right→ مورب از بالا چپ به پایین راستto top→ از پایین به بالا
🛑 پشتیبانی در مرورگرهای قدیمی
برای مرورگرهایی که گرادیانت را پشتیبانی نمیکنند، یک رنگ fallback تعیین کنید:
.sidebar {
background-color: #e5e9dc; /* fallback */
background-image: linear-gradient(to bottom, #e5e9dc, white);
}
🤹♀️ پشتیبانی برای مرورگرهای نیمهقدیمی
background-color: #e5e9dc; /* fallback */
background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e9dc), to(white));
background-image: -webkit-linear-gradient(top, #e5e9dc, white);
background-image: -moz-linear-gradient(top, #e5e9dc, white);
background-image: -ms-linear-gradient(top, #e5e9dc, white);
background-image: -o-linear-gradient(top, #e5e9dc, white);
background-image: linear-gradient(to bottom, #e5e9dc, white); /* مدرن */
🔹 مرورگرها از بالا به پایین میخوانند و اولین مورد قابل پشتیبانی را اجرا میکنند.
🧠 نکات مهم
- گرادیانتها در CSS بهعنوان تصویر پسزمینه شناخته میشوند.
- همیشه یک رنگ ساده بهعنوان fallback مشخص کنید.
- تغییر رنگها یا جهت گرادیانت بسیار ساده است.
🧪 تمرین پیشنهادی
- یک گرادیانت افقی بسازید.
- یک گرادیانت مورب از آبی به زرد امتحان کنید.
- گرادیانت را روی بخشهای مختلف مثل header یا footer تست کنید.