gradient.png

gradient.png

gradient.png هو تطبيق ويب مخصص لإنشاء الصور.

ميزات قابلة للتخصيص:

• 2 - 5 ألوان ونسب كل منها
• ارتفاع الصورة وعرضها (بالبكسل)
• التدرج الخطي أو الشعاعي
• درجات التدرج الخطي أو مركز التدرج الشعاعي

قم بتنزيل الصورة (للخلفيات) أو انسخ ملف CSS (للأقسام)!

تثبيت

1. استنساخ هذا الريبو
2. npm install
3. npm start

تحفيز

تتطلب العديد من ميزات تخصيص الخلفية تحميل صورة - أغلفة/لافتات ملفات تعريف الوسائط الاجتماعية، وموضوع Gmail، وخلفية هاتفك/الكمبيوتر المحمول. تعتبر التدرجات خيارًا رائعًا لمثل هذه الحالات. إنهم جميلون، لكنهم مهزومون وغير مشتتين.

يوجد CSS Gradient كمولد خلفية متدرجة قابلة للتخصيص لمواقع الويب. على وجه التحديد، يقومون بإنشاء ملف CSS الذي يمكن توفيره لخاصية background div. ومع ذلك، لا يتوفر في هذا الموقع خيار تصدير التدرج الذي تم إنشاؤه كصورة. قررت أن أغتنم هذه الفرصة كتحدي لإعادة تصميم واجهة المستخدم/تجربة المستخدم، بالإضافة إلى إضافة ميزة تصدير الصور.

كان الهدف هو صقل مهاراتي في React، والتعود على ممارسات تطوير الويب الجيدة، بالإضافة إلى إنشاء واجهة مستخدم وتجربة بديهية وسريعة الاستجابة.

التبعيات

يستخدم gradient.png حزم npm التالية:

• إنشاء تطبيق React: النموذج المعياري للتطبيق
• واجهة المستخدم المادية: أشرطة التمرير، والانتقالات، وتأثير تموج الزر، ومجموعة الراديو
• رد الفعل القابل للسحب: منتقي التشبع/القيمة القابل للسحب
• أيقونات التفاعل: جميع الأيقونات

شكر وتقدير

• دورا تشاو للنموذج الأولي
• تدرج CSS لإلهام إعادة التصميم
• مايكل جاكسون لخوارزميات تحويل مساحة اللون