Share
Essere "pixel perfect" è qualcosa che è diventato meno importante per i web designer una volta che tutti abbiamo accettato tali siti web può avere un aspetto diverso su diversi schermi e dispositivi. Ma ciò non significa che l'attenzione ai dettagli sia meno desiderabile. In questo tutorial ti presenterò uno strumento (un'estensione di Chrome) che può aiutarti a raggiungere la perfezione dei pixel nei tuoi progetti web.
Prima di tutto, vai su www.canvasflip.com/visual-inspector per scaricare l'estensione di Chrome. Una volta installato, ti verrà chiesto di registrarti per un account (gratuito, ma gli aggiornamenti sono disponibili da $ 5 per utente, al mese). Sei attivo e funzionante!
Estensione di Visual Inspector ChromeL'ispettore ti consente di selezionare qualsiasi elemento sulla pagina ed esaminarne le proprietà. Ecco cosa mostra l'ispettore quando selezioniamo il logo sulla homepage di Tuts +, ad esempio:
Possiamo vedere il markup usato e le varie classi assegnate all'elemento. Possiamo anche vedere il padding, il bordo e altri stili applicati. Possiamo vedere la fonte dell'immagine in questo caso, e scorrendo verso il basso possiamo vedere molto altro ancora.
In questa fase possiamo esportare tutte le risorse che possiamo vedere. I file di immagine, anche se non in formato SVG, sono prontamente disponibili da afferrare. Anche testo e altri stili possono essere esportati in JPG o PNG e portati all'applicazione di progettazione di tua scelta, che è davvero utile.
Spostando il mouse sul browser e facendo clic su vari elementi, verranno rivelate le misurazioni e l'allineamento, specificato e implicito, che consente di ottenere una solida idea di dove tutto è in relazione a tutto il resto e di aiutare a raggiungere la perfezione dei pixel.
Come con molti altri strumenti di ispezione per il browser, puoi modificare le proprietà e gli stili di qualsiasi elemento che ti piace. Tuttavia con Visual Inspector, come si può verificare, tutti gli stili sono modificabili con strumenti visivi (cursori, selettori di colori e così via).
Una volta cambiato, puoi colpire il Output CSS pulsante per rivelare i nuovi stili che hai creato.
In alternativa, puoi colpire Sincronizza modifiche sul Informazioni scheda e le tue modifiche verranno salvate nel tuo account. Ciò ti consente di rivisitare tali cambiamenti in futuro, cosa che i normali ispettori del browser non consentono per impostazione predefinita.
Visual Inspector è un ottimo strumento per coloro che amano raffinazione nel browser. Esamina ciò che già esiste, apporta le modifiche che desideri, quindi esporta quelle modifiche o salvale per dopo. E se si aggiorna, è possibile collaborare anche con i membri del team. Vai e dai un'occhiata poi facci sapere cosa ne pensi nei commenti!
Accentsconagua