ابزار ساخت گرادینت Linear، Radial و Conic با CSS
Linear، Radial و Conic Gradient را با چند Color Stop طراحی کنید، زاویه و موقعیت‌ها را دقیق تنظیم کنید و CSS موجود را نیز برای ویرایش وارد کنید.
بوم زنده
هر تغییر همان لحظه روی گرادینت دیده می‌شود.
نوع گرادینت
ساختار اصلی و حالت تکرارشونده را انتخاب کن.
Color Stopها
Stop اضافه کن، رنگ و Opacity بده و موقعیت را دقیق تنظیم کن.
Presetها
یک نقطه شروع حرفه‌ای انتخاب کن و بعد شخصی‌سازی کن.
Import CSS
یک gradient موجود را Paste کن و تا حد امکان به Stopهای قابل ویرایش تبدیلش کن.
Gradient Health
خوانایی و پیچیدگی خروجی را سریع بررسی کن.
CSS نهایی
خروجی پایین، بیرون Workspace است تا Canvas هیچ‌وقت روی کد قرار نگیرد.
Declaration
CSS کامل
ابزار ساخت گرادینت CSS با کنترل کامل Color Stopها
Gradient حرفه‌ای معمولاً به بیش از دو رنگ نیاز دارد. این ابزار Color Stopها را مستقل مدیریت می‌کند تا موقعیت، ترتیب، شفافیت و نوع Gradient را بدون ویرایش دستی رشته CSS تنظیم کنید.
از Preset برای شروع سریع استفاده کنید یا CSS موجود را Import کنید و همان Gradient را به‌صورت بصری اصلاح کنید.
راهنمای استفاده از CSS Gradient Builder
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
CSS Gradient Builder برای ساخت Linear، Radial و Conic Gradient با Color Stopهای قابل ویرایش است. هر Stop رنگ و Position مستقل دارد و CSS نهایی هم‌زمان ساخته می‌شود.
قبل از شروع این موارد را بدانید
- اول نوع Gradient را انتخاب کنید.
- با دو Stop شروع کنید و فقط در صورت نیاز Stop اضافه کنید.
- اگر Gradient موجود دارید از Import CSS استفاده کنید.
قدم‌به‌قدم با ابزار کار کنید
- ۱. نوع Gradient را انتخاب کنیدLinear، Radial یا Conic را بر اساس طرح موردنظر انتخاب کنید.
- ۲. Stopها را تنظیم کنیدرنگ و موقعیت هر Color Stop را تغییر دهید یا Stop جدید اضافه کنید.
- ۳. جهت و هندسه را تنظیم کنیدAngle، Position و گزینه‌های مربوط به نوع Gradient را کنترل کنید.
- ۴. CSS را کپی کنیدمقدار Gradient یا Declaration کامل را بردارید.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- Color Stop
- یک رنگ به‌همراه موقعیت آن روی Gradient.
- Equalize
- Stopها را با فاصله مساوی پخش می‌کند.
- Reverse
- ترتیب رنگ‌ها و موقعیت‌ها را معکوس می‌کند.
- Import CSS
- Gradient موجود را برای ویرایش وارد می‌کند.
خروجی ابزار را چطور تفسیر کنید؟
در خروجی، ترتیب و Position Stopها مستقیماً شکل Transition را تعیین می‌کنند. Stopهای نزدیک‌تر تغییر تیزتر و فاصله بیشتر تغییر نرم‌تر ایجاد می‌کنند.
اگر مرحله بعدی کارتان این است
سوالات رایج
Linear و Radial Gradient چه فرقی دارند؟
Linear رنگ‌ها را در یک جهت خطی پخش می‌کند؛ Radial از یک مرکز یا کانون به بیرون گسترش پیدا می‌کند.
Conic Gradient برای چه چیزی مناسب است؟
برای Pie-like effects، حلقه‌ها، Badgeها و برخی پس‌زمینه‌های تزئینی کاربرد دارد.
چطور Gradient نرم‌تری بسازیم؟
Color Stopهای بیشتر با فاصله مناسب و اختلاف رنگ کنترل‌شده معمولاً Transition نرم‌تری ایجاد می‌کنند.