صور تراكب على أي HTML / موقع ويب لمقارنة لكل بكسل [Chrome]

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

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

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

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

ملحق PerfectPixel هو أداة مفيدة تمامًا لمطوري الويب والمصممين ، ومتوفر على رابط سوق Chrome الإلكتروني أدناه.

قم بتثبيت PerfectPixel لـ Google Chrome