فرصت مطالعه ندارید؟ چکیده این مطلب را همین‌جا گوش دهید:
پیدا کردن ترکیب رنگ‌های متناسب و چشم‌نواز برای پس‌زمینه وب‌سایت یا طراحی رابط کاربری (UI) همیشه یکی از چالش‌های زمان‌بر برای طراحان است. ابزار آنلاین WebGradients با ارائه‌ی یک کتابخانه‌ی عظیم و دسته‌بندی‌شده از ۱۸۰ گرادیانت رنگی مدرن، این فرآیند را به چند ثانیه کاهش می‌دهد. این مجموعه کاملاً رایگان است و نیازی به نصب هیچ نرم‌افزاری ندارد.
چرا WebGradients گزینه‌ای ایده‌آل برای طراحان است؟
این پلتفرم به‌طور اختصاصی برای طراحان وب، توسعه‌دهندگان فرانت‌اند و طراحان رابط کاربری ساخته شده است. تمام گرادیانت‌های موجود در این مجموعه با کدهای CSS3 سازگار با مرورگرهای مختلف ارائه می‌شوند. شما می‌توانید بدون نیاز به دانش پیچیده رنگ‌شناسی، کدهای آماده را کپی کرده و در پروژه‌های خود استفاده کنید. همچنین بسته‌های اختصاصی برای نرم‌افزارهای اسکچ (Sketch)، فتوشاپ (Photoshop) و فیگما (Figma) به عنوان پاداش در دسترس کاربران قرار دارد.
اگر در کنار طراحی وب به توسعه‌ی فرانت‌اند یا ساخت ابزارهای تعاملی علاقه دارید، شاید مطالعه‌ی مقاله‌ی ساخت ماشین‌حساب وام و پس‌انداز با HTML و CSS نیز برای ایده‌پردازی‌های بعدی شما مفید باشد.
مراحل استفاده از گرادیانت‌ها و کدهای CSS
کار با این وب‌سایت بسیار ساده است و هیچ مرحله‌ی پیچیده‌ای ندارد. برای دریافت و استفاده از گرادیانت مد نظر خود، مراحل زیر را دنبال کنید:
- وارد وب‌سایت رسمی WebGradients شوید.
- در صفحه اصلی، فهرست کامل ۱۸۰ گرادیانت رنگی را به صورت کارت‌های رنگی مشاهده می‌کنید.
- با نگه داشتن ماوس روی هر کارت رنگی، گزینه‌ی کپی کردن کد CSS3 (Copy CSS) ظاهر می‌شود.
- با یک کلیک، کد به حافظه‌ی موقت سیستم شما منتقل می‌شود.
- همچنین می‌توانید تصویر پس‌زمینه را با فرمت PNG دانلود کنید تا در نرم‌افزارهای گرافیکی به کار ببرید.
| ویژگی | مقدار / وضعیت |
|---|---|
| نوع ابزار | کتابخانه آنلاین گرادیانت و تولیدکننده رنگ |
| هزینه | ۱۰۰٪ رایگان |
| نیاز به ثبت‌نام | خیر (بدون نیاز به ایجاد حساب کاربری) |
| خروجی‌های موجود | کد CSS3، تصویر PNG، فایل‌های فیگما، فتوشاپ و اسکچ |
| وضعیت دسترسی برای ایران | بدون محدودیت (Accessible) |
نمونه کد CSS گرادیانت در پروژه‌های وب
کدهایی که این پلتفرم در اختیار شما قرار می‌دهد، استانداردهای مدرن CSS3 را رعایت می‌کنند و به راحتی روی تمام مرورگرهای امروزی بدون افت کیفیت اجرا می‌شوند. در ادامه نمونه‌ای از کدهای خروجی این ابزار برای یک پس‌زمینه گرادیانت آورده شده است:
.gradient-background {
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
width: 100%;
height: 100vh;
}
توضیح بخش‌های کد:
- خط اول کلاس CSS مورد نظر را تعریف می‌کند تا بتوانید آن را به هر تگ HTML مانند تگ بدنه (body) یا بخش مشخصی از صفحه اختصاص دهید.
- دستور
linear-gradientزاویه‌ی تابش رنگ (در اینجا ۱۳۵ درجه) و نقطه‌ی شروع و پایان رنگ‌ها را مشخص می‌کند. - دو خط بعدی عرض و ارتفاع عنصر را تنظیم می‌کنند تا گرادیانت کل صفحه یا بخش مد نظر را پوشش دهد.
چگونه گرادیانت شخصی‌سازی‌شده بسازیم؟
علاوه بر ۱۸۰ رنگ آماده، این سایت مابین گزینه‌های خود به بخش ابزار ساخت گرادیانت (Color Palette Generator) نیز مجهز است. با کمک این بخش می‌توانید سیستم رنگی دلخواه خود را روی یک صفحه‌ی فرود (Landing Page) نمونه تست کنید و ببینید ترکیب رنگ‌های انتخابی شما در عمل چه جلوه‌ای به مخاطب منتقل می‌کند. این قابلیت برای طراحانی که می‌خواهند فراتر از گزینه‌های پیش‌فرض بروند فوق‌العاده کاربردی است.
پرسش‌های متداول
آیا استفاده از این گرادیانت‌ها در پروژه‌های تجاری رایگان است؟
بله، تمامی گرادیانت‌های این مجموعه برای استفاده در پروژه‌های شخصی و تجاری کاملاً رایگان هستند.
آیا برای دانلود فایل‌های فیگما و فتوشاپ نیاز به پرداخت هزینه است؟
خیر، بسته‌های کمکی برای نرم‌افزارهای گرافیکی نیز به صورت رایگان در اختیار کاربران قرار گرفته‌اند.
آیا برای کپی کردن کدها نیاز به ساخت حساب کاربری داریم؟
خیر، هیچ‌گونه نیازی به ثبت‌نام یا ورود به سایت نیست و بلافاصله می‌توانید از کدهای CSS استفاده کنید.
جمع‌بندی
ابزار WebGradients با ارائه‌ی مجموعه‌ای ساختاریافته، مدرن و کاملاً رایگان از ۱۸۰ گرادیانت رنگی، کار طراحان وب و توسعه‌دهندگان را بسیار ساده کرده است. عدم نیاز به ثبت‌نام، دسترسی فوری به کدهای CSS سازگار با مرورگرها و ارائه‌ی خروجی‌های گرافیکی متنوع، این ابزار را به یکی از ارکان ثابت جعبه‌ابزار هر طراح دیجیتالی تبدیل می‌کند.
