Immagini overlay su qualsiasi HTML / sito Web per confronto pixel [Chrome]

PerfectPixel, un'estensione di Chrome, consente agli sviluppatori Web e ai designer di sovrapporre facilmente un'immagine semi-trasparente sulla parte superiore di un sito Web HTML sviluppato. Spostando l'immagine su una pagina Web, gli sviluppatori possono vedere visivamente la differenza nei pixel. L'estensione ha anche un'opzione di opacità, che consente di visualizzare sia l'overlay sia l'HTML sviluppato. Mentre sposti l'immagine, le coordinate vengono automaticamente aggiornate nel pop-up PerfectPixel, che può quindi essere copiato e utilizzato dagli sviluppatori web.

Dopo aver installato l'estensione, fai clic sul pulsante nella barra degli strumenti e un popup apparirà sulla tua pagina web. Clic Aggiungi nuovo livello e seleziona un file dal tuo sistema locale. Questa immagine verrà immediatamente aggiunta come un livello sulla pagina web. Puoi Mostra nascondi immagini e anche scegliere quelle diverse. Sposta l'immagine per provarla in diverse posizioni e le coordinate verranno automaticamente aggiornate nel pop-up. Puoi aggiungere tutte le immagini che desideri e selezionare quelle particolari facendo clic su di esse. Una volta posizionata correttamente l'immagine, è possibile utilizzare le coordinate aggiornate per posizionare l'immagine tramite CSS. Lo sviluppatore ha menzionato il supporto per overlay multiplo; tuttavia, i nostri test hanno prodotto l'impossibilità di aggiungere più livelli.

PerfectPixel Opzioni consentire di abilitare il Modalità compatibilità archiviazione, che è lì per risolvere i problemi di compatibilità con il caricamento delle immagini. Una limitazione dell'utilizzo della modalità compatibilità, tuttavia, è che la dimensione del file è limitata a un massimo di 1,5 MB. È inoltre possibile abilitare il Modalità di debug e Tasti di scelta rapida.

tuttavia, i nostri test hanno dimostrato che mentre è possibile aggiungere più livelli, è possibile visualizzare solo un livello alla volta in una determinata pagina. Questa è una sfortunata limitazione e lo sviluppatore dovrebbe prendere in considerazione la possibilità di cambiarla in modo da poter visualizzare più livelli contemporaneamente. Il pulsante "Blocca" salva la posizione di un livello immagine che hai aggiunto e anche se esci dall'estensione (fai clic su il suo pulsante di nuovo in modo che il pannello scompaia) ricorderà la posizione per quelle immagini alla successiva apertura esso.

L'estensione PerfectPixel è uno strumento abbastanza utile per sviluppatori e designer Web e disponibile sul link del Chrome Web Store di seguito.

Installa PerfectPixel per Google Chrome