گرادیان خطی در CSS
گرادیان‌های خطی در CSS یکی از قدرتمندترین ابزارها برای ایجاد انتقال‌های رنگی روان و جذاب در طراحی وب هستند. این ویژگی به شما امکان می‌دهد تا با ترکیب چندین رنگ، افکت‌های بصری حرفه‌ای ایجاد کنید.
گرادیان خطی زمانی ایجاد می‌شود که رنگ‌ها به صورت خطی و در جهت مشخصی تغییر کنند. این جهت می‌تواند افقی، عمودی، مورب یا حتی زاویه‌دار باشد.
نحوه ایجاد گرادیان خطی
برای ایجاد گرادیان خطی از تابع linear-gradient() استفاده می‌کنیم. ساختار کلی این تابع به صورت زیر است:
background: linear-gradient(جهت, رنگ اول, رنگ دوم, ...);
| پارامتر |
توضیحات |
| جهت |
تعیین کننده مسیر تغییر رنگ‌ها (مثلاً to right, to bottom, 45deg) |
| رنگ‌ها |
لیست رنگ‌هایی که در گرادیان استفاده می‌شوند |
مثال‌های کاربردی
در اینجا چند نمونه از گرادیان‌های خطی رایج را مشاهده می‌کنید:
- گرادیان افقی: background: linear-gradient(to right, #ff9a9e, #fad0c4);
- گرادیان عمودی: background: linear-gradient(to bottom, #a18cd1, #fbc2eb);
- گرادیان مورب: background: linear-gradient(45deg, #ffc3a0, #ffafbd);
برای یادگیری عمیق‌تر و مشاهده مثال‌های پیشرفته‌تر، می‌توانید به آموزش جامع وارد شوید مراجعه کنید.
نکات پیشرفته
- می‌توانید با افزودن درصد بعد از هر رنگ، نقطه توقف رنگ را مشخص کنید (مثال: linear-gradient(to right, red 0%, blue 50%, green 100%))
- از چندین گرادیان می‌توان به صورت همزمان با استفاده از کاما استفاده کرد
- گرادیان‌ها در تمام مرورگرهای مدرن پشتیبانی می‌شوند، اما برای سازگاری بهتر می‌توان از پیشوندهای vendor استفاده کرد
توجه: گرادیان‌های خطی نه تنها برای background، بلکه برای border-image و mask-image نیز قابل استفاده هستند.
