جهاز ظلال بوكس

الجهاز


مرحبا بالجميع!


أريد أن أوجه انتباهكم إلى تطوير صغير - جهاز Box-Shadows (#bSd).
هذه أداة تذكرنا إلى حد ما بمنشئ أو محرر css. في ذلك يمكنك إنشاء أجهزة لكل ذوق وميزانية.


لا أعتقد أنه سيجد الكثير من المعجبين ، ولكن آمل أن تستمتع بها.


عن المشروع


جهاز Box-shadows (#bSd) هو أداة تسمح لك بإنشاء أجهزة بسيطة ولكنها جميلة. من خلال تجربة الأزرار ، يمكنك استخدام الأداة لإنشاء الهاتف الذكي الذي تحلم به ، على سبيل المثال. تبديل الأزرار ، والجمع ، وتغيير حجم الشاشة ولون اللوحة ، وما إلى ذلك ... هل حلمت بتفاح وردي؟ ورجاء =)


الصورة


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


يمكنك استخدام الأجهزة التي تم إنشاؤها لعرض التعليمات البرمجية والقوالب والرسومات والتصميم الذي أنشأته للأجهزة المحمولة ووضع لافتات html5 فيه والمزيد. تعتمد طرق الاستخدام فقط على خيالك.


واجهة الموقع


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


الجهاز


هذه هي الأزرار الرئيسية ، وليس من الصعب تخمين نوع الجهاز الذي سيتم إنشاؤه. يوجد حاليًا 5 أنواع ومواضع للأجهزة مثالية لوضعها على موقعك.


  • هاتف صغير
  • هاتف كبير
  • صورة الجهاز اللوحي
  • المشهد اللوحي
  • آي بود

الخلفية


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


  • انقر على الدائرة بجانب ← اختر
  • قم بإنشاء لونك الخاص أو أدخل الرمز في النافذة التي تظهر
  • اضغط على Enter لإغلاق النافذة

يمكنك ضبط قيم اللون بنفسك. عندما يتم قبول الرمز ، تنعكس القيم بتنسيق RGB. إذا كنت بحاجة إلى تمثيل سداسي عشري ، فسيظهر رمز HEX الخاص بك على الزر المجاور للدائرة. انقر على الزر وانسخ الرمز.


ظل الصندوق


تضيف الأزرار الموجودة على هذه الوحدة الظلال إلى جهازك ، مما يجعلها أكثر واقعية. بينما تتوفر 4 أنواع + زر لإزالة الظلال.


الصورة


  • bSd_light
  • bSd_small
  • bSd_big
  • bSd_classic
  • bSd_none

العرض


هذه ليست كتلة مهمة ، ولكن إذا كنت ترغب في إنشاء ، على سبيل المثال ، لوحة فارغة لهاتف ذكي ، يمكنك إيقاف تشغيل الشاشة بالضغط على الزر المطلوب. أيضًا ، إذا سئمت من تشغيل النص على الشاشة ، في نفس الكتلة ، يمكنك إيقافه أو إيقافه تمامًا.


ابتكر أسلوبك الخاص


هذا حقل خاص يمكنك فيه إدخال أي سمة وقيمتها. لحفظ سمات متعددة ، افصل بينها بفاصلة منقوطة.


الصورة


إنتباه! عند تعديل هذا الحقل ، ستتم إعادة ضبط جميع الإعدادات التي تم إنشاؤها مسبقًا! لذلك ، إذا كنت تريد تعيين الأبعاد الخاصة بك ، على سبيل المثال ، يجب عليك أولاً إدخالها في هذا الحقل ، ثم العمل باستخدام الأزرار.


احصل على الرمز


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


الموقف


هذه الكتلة ليست مهمة للغاية ، ولكنها يمكن أن تكون مفيدة عند تلقي الرمز. يقوم بتعيين معلمة تحديد المواقع التي تحتاج إليها مسبقًا لوضعها على الموقع. أوصي باستخدام هذه الأزرار في اللحظة الأخيرة ، أي بعد كل العمل على إعداد جهازك.


الأزرار


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


ملاحظة


لا تزال الأداة قيد الإنهاء ، لذلك يتم قبول أي اقتراحات لتحسينها أو تعليقاتك. ربما يمكننا معًا إنشاء شيء أكثر فائدة)
في انتظار انتقاداتك وتعليقاتك. نرحب بأي آراء.


استمتع بتجاربك.


← إنشاء جهازك

Source: https://habr.com/ru/post/ar418277/


All Articles