Share
Å være "piksel perfekt" er noe som ble mindre viktig for webdesignere når vi alle aksepterte de nettstedene kan se forskjellig på forskjellige skjermbilder og enheter. Men det betyr ikke at oppmerksomhet på detaljer er noe mindre ønskelig. I denne opplæringen skal jeg introdusere deg et verktøy (en Chrome-utvidelse) som kan hjelpe deg med å oppnå piksel perfeksjon i webdesignene dine.
Først og fremst, gå til www.canvasflip.com/visual-inspector for å laste ned Chrome-utvidelsen. Når du er installert, blir du bedt om å registrere deg for en konto (gratis, men oppgraderinger er tilgjengelige fra $ 5 per bruker, per måned). Du er oppe og går!
Visual Inspector Chrome utvidelseInspektøren lar deg velge element på siden og undersøke egenskapene. Her ser du inspektøren når vi velger logoen på Tuts + -siden, for eksempel:
Vi kan se merket brukt, og de ulike klassene som er tildelt elementet. Vi kan også se polstring, kantlinje og andre stilarter som brukes. Vi kan se bildekilden i dette tilfellet, og ved å bla ned kan vi se mye mer dessuten.
På dette stadiet kan vi eksportere alle eiendeler vi kan se. Bildefiler, men ikke i SVG-format, er lett tilgjengelige. Selv tekst og andre stiler kan eksporteres til JPG eller PNG og tatt til designprogrammet etter eget valg, noe som er veldig nyttig.
Flytter musen rundt nettleseren og klikker på ulike elementer vil avsløre mål og justering, spesifisert og underforstått, slik at du får en solid ide om hvor alt er i forhold til alt annet - og hjelper deg med å oppnå piksel perfeksjon.
Som med mange andre inspeksjonsverktøy for nettleseren, kan du endre egenskaper og stiler av elementene du liker. Men med Visual Inspector, som du kanskje inspiserer, kan alle stiler endres med visuelle verktøy (skyveknapper, fargeplukkere og så videre).
Når du er forandret, kan du treffe CSS Output knappen for å avsløre de nye stilene du har opprettet.
Alternativt kan du treffe Synkroniser endringer på info fanen og endringene dine blir lagret i kontoen din. Dette gjør at du kan se disse endringene i fremtiden - noe som vanlige nettlesereinspektører ikke tillater som standard.
Visual Inspector er et flott verktøy for de som liker raffinering i nettleseren. Undersøk hva som allerede finnes, gjør hva endringer du ønsker, og eksporter deretter de endringene eller lagre dem for senere. Og hvis du oppgraderer, kan du også samarbeide med gruppemedlemmer. Gå og sjekk det ut så gi oss beskjed om hva du synes i kommentarene!
Accentsconagua