Share
Att vara "pixel perfekt" är något som blev mindre viktigt för webbdesigners när vi alla accepterat dessa webbplatser kan se annorlunda över olika skärmar och enheter. Men det betyder inte att uppmärksamhet på detaljer är något mindre önskvärt. I denna handledning ska jag presentera dig för ett verktyg (en Chrome-förlängning) som kan hjälpa dig att uppnå pixel perfektion i dina webbdesigner.
Först och främst, gå till www.canvasflip.com/visual-inspector för att ladda ner Chrome-tillägget. När du är installerad kommer du att bli ombedd att registrera dig för ett konto (gratis, men uppgraderingar är tillgängliga från $ 5 per användare, per månad). Du är igång!
Visuell inspektör Chrome förlängningInspektören tillåter dig att välja vilket element som helst på sidan och granska dess egenskaper. Det här är vad inspektören visar när vi väljer logotypen på Tuts + hemsida, till exempel:
Vi kan se markeringen som används och de olika klasserna som tilldelats elementet. Vi kan också se vadderingar, gränser och andra stilar som tillämpas. Vi kan se bildkällan i det här fallet, och genom att rulla ner kan vi se mycket mer förutom.
I det här skedet kan vi exportera alla tillgångar vi kan se. Bildfiler, men inte i SVG-format, är lättillgängliga att ta tag i. Även text och andra stilar kan exporteras till JPG eller PNG och tas till designprogrammet efter eget val, vilket är mycket användbart.
Flytta musen runt webbläsaren och klicka på olika element kommer att avslöja mätningar och anpassning, specificerad och underförstådd, vilket hjälper dig att få en gedigen uppfattning om var allt är i relation till allt annat - och hjälpa dig att uppnå pixel perfektion.
Som med många andra inspektionsverktyg för webbläsaren kan du ändra egenskaper och stilar på alla element du gillar. Men med Visual Inspector, som du kan inspektera, kan alla stilar ändras med visuella verktyg (reglage, färgplockare och så vidare).
När du ändrats kan du slå på CSS-utgång knappen för att avslöja de nya stilar du har skapat.
Alternativt kan du träffa Synkronisera ändringar på Info fliken och dina ändringar sparas i ditt konto. Detta gör det möjligt för dig att återkomma de här förändringarna i framtiden - något som vanliga webbläsare inspektörer inte tillåter som standard.
Visual Inspector är ett bra verktyg för dem som gillar raffinering i webbläsaren. Undersök vad som redan existerar, gör vilka ändringar du vill, och exportera dessa ändringar eller spara dem för senare. Och om du uppgraderar kan du samarbeta med gruppmedlemmar också. Gå och kolla in det och låt oss veta vad du tycker i kommentarerna!
Accentsconagua