تصميم زر احترافي متجاوب ومتفاعل بالـ html و css

تصميم زر احترافي متجاوب ومتفاعل بالـ html و css
كيفية تصميم زر احترافي متجاوب ومتفاعل بالـ html و css, هل انت صاحب موقع أو مدونة وتحتاج إلى اضافة ازرار احترافية متجاوبة  في مواضيع موقعك سوف اخبرك كيف تقوم بعمل ذلك باستخدام برنامج Brackets لتحرير وإنشاء النصوص البرمجية.

أهمية وضع الازرار:

الأزرار هي عنصر أساسي في تصميم التفاعل, ولديها دور أساسي في المحادثة بين الزائر والموضوع الذي يتم عرضة, وعندما يتعلق الأمر بالتفاعل يجب أن يعرف الزائر ما هو "قابل للنقر" وما هو "غير قابل للنقر" لكن كيف سيفهم المستخدم إذا كان عنصر معين تفاعلي ام لا؟ عن طريق تغير في شكل  الزر وتغيير الالوان بة عند المرور فوقة.

القواعد الأساسية لتصميم الازرار:

-يجب مراعاة عوامل الرؤية مثل " الحجم والشكل واللون " بمعنى لاتضع الحجم كبير بشكل غير مألوف او صغير يصعب النقر عليه ولا تستخدم الوان فاتحة فيصعب رؤيته أو تستخدم ألوان مضيئة فتضر عين القارئ.
-وضع الأزرار حيث يتوقع المستخدمون أماكنها.
-اجعل الازرار سهلة لاصابع المستخدمين للاجهزة المحمولة.
-تجنب وضع الكثير من الازرار, هذه مشكلة شائعة في العديد من التطبيقات ومواقع الويب عند وضع خيارات كتيرة جدا, ينتهي الأمر بالمستخدمين إلى عدم القيام بأي شيء.

ما هو Brackets؟

Brackets هو محرر نصوص برمجية مفتوح المصدر مصمم خصيصا للمبرمجين و مصممين المواقع، مكتوب في تقنيات مثل JavaScript و HTML و CSS, تم تصميمة من قبل Adobe Systems تم اصدار النسخة الاولى من البرنامج  في عام 2013 ، ودائما يتم تطويره وتحسينه بانتظام وبدقة في كل اصدار.

يُعتبر من افضل البرامج التي تدعم HTML و CSS و LESS و SASS ، بارزًا بما في ذلك عدد من الأدوات المرئية المفيدة التي يمكن أن تساعد المطورين في إجراء تغييرات سريعة وتعديل التعليمات البرمجية الخاصة بهم بسرعة. إلى جانب التحرير المضمن، عرض صفحتين لتحرير في وقت واحد مع دعم المعالج المسبق تقدم Brackets أيضًا معاينة مباشرة, يمكن ربط هذه الميزة بمتصفح الإنترنت للسماح للمطوّرين برؤية التغييرات التي يبدونها في الاستخدام الفعلي.
تحميل البرنامج من الموقع الرسمي
الزر الأول:
كود زر شراء الان
تحميل الكود من ◄هـنـا
الزر الثاني:
كود زر التحميل الان
تحميل الكود من ◄ هـنـا

Marwani
كاتب المقالة
كاتب ومحرر اخبار اعمل في موقع konozplus | كنوز بلس .

جديد قسم : اضافات بلوجر

إرسال تعليق