Overlay-afbeeldingen op elke HTML / website voor vergelijking per pixel [Chrome]

PerfectPixel, een Chrome-extensie, biedt webontwikkelaars enontwerpers om eenvoudig een semi-transparante afbeelding boven op een ontwikkelde HTML-website te leggen. Door de afbeelding op een webpagina te verplaatsen, kunnen ontwikkelaars het verschil in pixels visueel zien. De extensie heeft ook een optie voor dekking, waarmee u zowel de overlay als de ontwikkelde HTML kunt bekijken. Terwijl u de afbeelding verplaatst, worden de coördinaten automatisch bijgewerkt in de pop-up PerfectPixel, die vervolgens kan worden gekopieerd en gebruikt door webontwikkelaars.

Nadat u de extensie heeft geïnstalleerd, klikt u op de knop in de werkbalk en er verschijnt een pop-up op uw webpagina. Klik Nieuwe laag toevoegen en selecteer een bestand van uw lokale systeem. Deze afbeelding wordt direct als laag over de webpagina toegevoegd. Jij kan Laten zien verbergen afbeeldingen en kies ook verschillende afbeeldingen. Verplaats de afbeelding om deze anders te testenposities en de coördinaten worden automatisch bijgewerkt in de pop-up. U kunt zoveel afbeeldingen toevoegen als u wilt en bepaalde selecteren door erop te klikken. Nadat de afbeelding correct is gepositioneerd, kunt u de bijgewerkte coördinaten gebruiken om uw afbeelding te positioneren via CSS. De ontwikkelaar heeft meerdere overlay-ondersteuning genoemd; ons testen leverde echter onvermogen op om meerdere lagen toe te voegen.

De PerfectPixel opties staat u toe om de Opslagcompatibiliteitsmodus, die er is om compatibiliteitsproblemen met het uploaden van afbeeldingen op te lossen. Een beperking van het gebruik van de compatibiliteitsmodus is echter dat de bestandsgrootte beperkt is tot maximaal 1,5 MB. U kunt ook de Foutopsporingsmodus en Sneltoetsen.

onze tests hebben echter aangetoond dat dit mogelijk ismeerdere lagen toevoegen, kunt u slechts één laag tegelijk op een bepaalde pagina bekijken. Dit is een ongelukkige beperking en de ontwikkelaar moet overwegen deze te wijzigen zodat meerdere lagen tegelijk kunnen worden bekeken. De knop 'Vergrendelen' slaat de positie op van een afbeeldingslaag die u hebt toegevoegd en zelfs als u de extensie verlaat (klik nogmaals op de knop zodat het paneel verdwijnt), onthoudt deze de positie voor die afbeeldingen wanneer u deze de volgende keer opent.

De PerfectPixel-extensie is een heel handig hulpmiddel voor webontwikkelaars en ontwerpers en is beschikbaar via de onderstaande Chrome Web Store-link.

Installeer PerfectPixel voor Google Chrome