تولیدکننده CSS Gradient
این ابزار برای ساخت سریع گرادیان CSS با پیش نمایش زنده طراحی شده است. می توانید نوع گرادیان را بین linear، radial و conic تغییر دهید، زاویه را با اسلایدر تنظیم کنید، رنگ های stop را اضافه یا حذف کنید و موقعیت هر stop را از ۰ تا ۱۰۰ درصد تغییر دهید. خروجی نهایی به صورت قانون CSS نمایش داده می شود و می توانید کل مقدار background یا فقط رشته گرادیان را کپی کنید.
نوع های گرادیان چه تفاوتی دارند؟
linear-gradient رنگ ها را در یک جهت خطی پخش می کند و برای پس زمینه دکمه، کارت، هدر و بنر رایج است. radial-gradient از یک مرکز به اطراف گسترش پیدا می کند و برای نور، نقطه تاکید یا افکت نرم مناسب است. conic-gradient رنگ ها را دور یک مرکز می چرخاند و برای نمودارهای دایره ای، نشانگرها یا افکت های خاص کاربرد دارد. در این ابزار زاویه برای linear و conic فعال است و در حالت radial پنهان می شود.
چگونه stop های رنگی را تنظیم کنیم؟
هر stop شامل یک رنگ و یک موقعیت درصدی است. اگر دو stop نزدیک به هم باشند، تغییر رنگ تندتر دیده می شود؛ اگر فاصله آنها زیاد باشد، انتقال نرم تر است. ابزار حداقل دو stop نگه می دارد و می توانید تا چند stop اضافه کنید. دکمه randomize زاویه و رنگ های تازه می سازد. Preset ها نیز ترکیب های آماده ای مثل Sunset، Ocean، Forest و Neon را سریع بارگذاری می کنند تا از آنها به عنوان نقطه شروع استفاده کنید.
نکات طراحی و عملکرد
گرادیان ها اگر زیاد اشباع یا پرکنتراست باشند، متن روی آنها سخت خوانده می شود. برای متن، یا رنگ های آرام تر انتخاب کنید یا لایه تیره و روشن جدا اضافه کنید. خروجی این ابزار مستقیما در CSS قابل استفاده است، اما در پروژه واقعی بهتر است آن را در class یا متغیر طراحی نگه دارید. گرادیان های پیچیده معمولا سبک تر از تصویر پس زمینه هستند، اما استفاده زیاد از آنها روی عناصر بزرگ و متحرک می تواند روی دستگاه های ضعیف اثر بگذارد.
استفاده در پروژه واقعی
بعد از کپی کردن CSS، بهتر است گرادیان را در یک کلاس مشخص یا متغیر design token نگه دارید تا در چند جای پروژه تکرار نشود. برای حالت تاریک و روشن نیز جداگانه تست کنید؛ گرادیانی که روی پس زمینه روشن جذاب است ممکن است در تم تاریک بیش از حد روشن یا کم کنتراست دیده شود.
نظرات