معرفی ابزار سازنده گرادینت
ابزار «سازنده گرادینت» به شما امکان میدهد با انتخاب نوع گرادینت، تنظیم جهت یا شکل آن و افزودن تا حداکثر هشت پله رنگی، یک گرادینت CSS بسازید. همانطور که تغییرات خود را اعمال میکنید، یک پیشنمایش زنده از گرادینت را مشاهده خواهید کرد و میتوانید کد CSS تولیدشده را تنها با یک کلیک کپی کنید.
این ابزار برای طیف وسیعی از کاربران کاربرد دارد؛ از کسی که میخواهد یک پسزمینه CSS ایجاد کند، یا کاربری که نیاز دارد دو رنگ و یک جهت را برای یک گرادینت تنظیم کند، تا طراحان و توسعهدهندگان فرانتاند که نیاز دارند نوع، موقعیت و چندین پله رنگی یک گرادینت را به دقت تنظیم کنند.
ورودیها و تنظیمات ابزار
برای ساخت گرادینت سفارشی خود، میتوانید گزینهها و ورودیهای زیر را در ابزار تنظیم کنید:
- نوع گرادینت: شما میتوانید یکی از گزینههای «خطی (Linear)»، «شعاعی (Radial)» یا «مخروطی (Conic)» را انتخاب کنید.
- زاویه: یک مقدار عددی برای گرادینتهای خطی یا مخروطی که جهت آنها را مشخص میکند.
- شکل: برای گرادینتهای شعاعی، میتوانید شکل را روی یکی از حالتهای «بیضی» یا «دایره» تنظیم کنید.
- پلههای رنگی: شما میتوانید تا هشت پله رنگی را تعریف کنید که هر کدام شامل موارد زیر است:
- رنگ پله: یک مقدار رنگی مشخص.
- موقعیت: یک مقدار درصدی از ۰٪ تا ۱۰۰٪.
خروجیهای ابزار
پس از اعمال تنظیمات، ابزار دو خروجی زیر را در اختیار شما قرار میدهد:
- پیشنمایش: یک نمایش بصری و زنده از گرادینت طراحیشده که همزمان با تغییرات شما بهروزرسانی میشود.
- CSS: کد CSS تولیدشده و نهایی برای استفاده مستقیم در پروژهها.
قوانین کارکرد و نکات فنی ابزار
برای استفاده بهینه از این ابزار، آشنایی با قوانین و رفتارهای فنی زیر مفید است:
- گرادینت اولیه و پیشفرض ابزار شامل دو پله رنگی است:
#6366f1 0%و#ec4899 100%. - هر پله رنگی جدیدی که به ابزار اضافه میشود، به طور پیشفرض در موقعیت ۵۰٪ قرار میگیرد.
- شما میتوانید حداکثر از هشت پله رنگی استفاده کنید. هنگامی که تعداد پلههای رنگی به هشت عدد میرسد، دکمه «افزودن پله رنگی» غیرفعال میشود.
- پس از کلیک روی دکمه «کپی CSS»، وضعیت دکمه به «کپی شد» تغییر میکند تا از کپی شدن موفقیتآمیز کد مطمئن شوید.
حریم خصوصی و پردازش دادهها
تمام گرادینتها مستقیماً در مرورگر شما رندر میشوند. هیچیک از تنظیماتی که در این ابزار انجام میدهید در سرورهای BroBroGo آپلود نخواهد شد و فرآیند پردازش کاملاً به صورت محلی در دستگاه شما انجام میگیرد.
سوالات متداول
تفاوت بین گرادینتهای خطی، شعاعی و مخروطی چیست؟
گرادینت خطی (linear) رنگها را در امتداد یک خط مستقیم که با زاویه مشخص میکنید ترکیب میکند. گرادینت شعاعی (radial) آنها را از مرکز به صورت دایره یا بیضی به سمت بیرون پخش میکند. گرادینت مخروطی (conic) رنگها را مانند یک چرخه رنگ به دور مرکز میچرخاند.
پلههای رنگی (color stops) چیستند؟
هر پله رنگی (color stop) رنگی است که در یک موقعیت مشخص در طول گرادینت قرار میگیرد — ۰٪ در شروع و ۱۰۰٪ در پایان. موقعیت یک پله را جابهجا کنید تا نقطه اوج رنگ آن تغییر کند، یا پلههای بیشتری برای ترکیب غنیتر اضافه کنید. شما میتوانید تا هشت پله رنگی استفاده کنید.
چگونه جهت گرادینت را کنترل کنم؟
برای گرادینتهای خطی (linear) یا مخروطی (conic)، اسلایدر زاویه جهت را تنظیم میکند — ۰ درجه رو به بالا و ۹۰ درجه رو به راست اشاره دارد. گرادینت شعاعی (radial) زاویه ندارد؛ به جای آن شکل دایره یا بیضی را انتخاب کنید تا نحوه انتشار آن را تغییر دهید.