تابع linear-gradient() در CSS برای ایجاد گرادیانت خطی بین دو یا چند رنگ استفاده میشود. این تابع امکان طراحی پسزمینههای زیبا و پویا را فراهم میکند. برای یادگیری بیشتر و مثالهای عملی، به دوره آموزش CSS مراجعه کنید.
ساختار تابع linear-gradient
linear-gradient(direction, color-stop1, color-stop2, ...)- direction: جهت گرادیانت (مثلاً to right, to bottom, 45deg)
- color-stop: رنگها و نقاط توقف آنها
مثال عملی تابع linear-gradient
.box {
background: linear-gradient(to right, #ff7e5f, #feb47b);
width: 200px;
height: 200px;
}جدول ویژگیها و توضیحات
| ویژگی | توضیح |
|---|---|
| direction | جهت گرادیانت (زاویه یا جهت کلمات کلیدی) |
| color-stop | رنگها و محل توقف آنها |
نکات مهم
- میتوان از چندین رنگ استفاده کرد و نقاط توقف مختلف تعیین نمود.
- تابع linear-gradient() میتواند به صورت background-image یا background استفاده شود.
- جهتها با deg یا to top/right/left/bottom مشخص میشوند.
- ترکیب linear-gradient با opacity و rgba باعث ایجاد افکتهای شفاف و زیبا میشود.
ادامه آموزش
برای یادگیری کامل CSS و گرادیانتها، حتماً دوره آموزش CSS را مشاهده کنید.
آموزش قبلی: آموزش تابع rgba در CSS
آموزش بعدی: آموزش تابع radial-gradient در CSS
دیدگاه و پرسش