گرادیان‌ها در CSS
در CSS، گرادیان‌ها امکان ایجاد انتقال‌های نرم و هموار بین دو یا چند رنگ را فراهم می‌کنند. سه نوع گرادیان در CSS تعریف شده است:
- گرادیان‌های خطی (Linear Gradients): از بالا به پایین، چپ به راست یا به صورت مورب ایجاد می‌شوند.
- گرادیان‌های شعاعی (Radial Gradients): بر اساس مرکز آن‌ها تعریف می‌شوند.
- گرادیان‌های مخروطی (Conic Gradients): به دور یک نقطه مرکزی چرخش می‌کنند.
گرادیان خطی (Linear Gradients)
برای ایجاد یک گرادیان خطی، باید حداقل دو نقطه رنگ (color stops) تعریف کنید. این نقاط رنگ‌ها هستند که می‌خواهید بین آن‌ها یک انتقال نرم و هموار ایجاد شود. همچنین می‌توانید نقطه شروع و جهت (یا زاویه) را همراه با افکت گرادیان تعیین کنید.
دستور سینتکس:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);- جهت: جهت گرادیان از بالا به پایین (به صورت پیش‌فرض)
- نقاط رنگی: رنگ‌های مختلفی که باید در گرادیان استفاده شوند.
مثال‌ها:
جهت از بالا به پایین (پیش‌فرض):
این گرادیان از بالا شروع شده و از قرمز به زرد تبدیل می‌شود:
#grad {
background-image: linear-gradient(red, yellow);
}جهت از چپ به راست:
این گرادیان از چپ شروع شده و از قرمز به زرد تبدیل می‌شود:
#grad {
background-image: linear-gradient(to right, red, yellow);
}جهت مورب:
برای ایجاد یک گرادیان به صورت مورب، باید جهت‌های افقی و عمودی را مشخص کنید. در اینجا، گرادیان از گوشه بالا-چپ به گوشه پایین-راست حرکت می‌کند:
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}استفاده از زاویه‌ها:
برای داشتن کنترل بیشتر بر روی جهت گرادیان، می‌توانید زاویه تعریف کنید. به عنوان مثال، 0deg معادل “به بالا” و 90deg معادل “به راست” است.
دستور سینتکس:
background-image: linear-gradient(angle, color-stop1, color-stop2);مثال با زاویه 180 درجه:
این گرادیان با زاویه ۱۸۰ درجه ایجاد شده و از بالا به پایین حرکت می‌کند:
#grad {
background-image: linear-gradient(180deg, red, yellow);
}استفاده از نقاط رنگی متعدد:
می‌توانید چندین نقطه رنگی برای ایجاد گرادیان استفاده کنید. به عنوان مثال:
#grad {
background-image: linear-gradient(red, yellow, green);
}مثال رنگین‌کمان:
گرادیانی که از چپ به راست با رنگ‌های رنگین‌کمان ایجاد شده است:
#grad {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}استفاده از شفافیت:
گرادیان‌ها همچنین از شفافیت پشتیبانی می‌کنند که می‌تواند برای ایجاد افکت‌های محو شدن استفاده شود. برای افزودن شفافیت، از تابع rgba() استفاده کنید که پارامتر آخر آن عددی بین 0 تا 1 است که میزان شفافیت رنگ را تعریف می‌کند.
مثال:
این گرادیان از چپ شروع شده و از شفاف کامل به قرمز کامل تغییر می‌کند:
#grad {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}تکرار یک گرادیان خطی:
از تابع repeating-linear-gradient() برای تکرار گرادیان‌های خطی استفاده می‌شود.
مثال:
یک گرادیان خطی تکراری:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}این ویژگی به شما اجازه می‌دهد افکت‌های جذابی را با تکرار گرادیان‌ها ایجاد کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام