Share
"Pixel perfect" zijn, is iets dat minder belangrijk werd voor webontwerpers zodra we allemaal die websites accepteerden kan zien er anders uit op verschillende schermen en apparaten. Maar dat betekent niet dat aandacht voor detail minder wenselijk is. In deze zelfstudie laat ik je kennismaken met een tool (een Chrome-extensie) die je kan helpen pixel-perfectie te bereiken in je webontwerpen.
Ga eerst naar www.canvasflip.com/visual-inspector om de Chrome-extensie te downloaden. Na installatie wordt u gevraagd om u aan te melden voor een account (gratis, maar upgrades zijn beschikbaar vanaf $ 5 per gebruiker, per maand). Je bent aan het draaien!
Visual Inspector Chrome-extensieMet de inspector kunt u elk element op de pagina selecteren en de eigenschappen ervan bekijken. Dit is wat de inspecteur te zien krijgt wanneer we het logo op de startpagina van Tuts + selecteren, bijvoorbeeld:
We kunnen de gebruikte markeringen zien en de verschillende klassen die aan het element zijn toegewezen. We kunnen ook opvullende, grens- en andere stijlen toepassen. We kunnen in dit geval de afbeeldingsbron zien en door naar beneden te scrollen zien we nog veel meer.
In dit stadium kunnen we alle items exporteren die we kunnen zien. Beeldbestanden, hoewel niet in SVG-formaat, zijn direct beschikbaar om te pakken. Zelfs tekst en andere stijlen kunnen worden geëxporteerd naar JPG of PNG en meegenomen naar de ontwerptoepassing van uw keuze, wat erg handig is.
Als u uw muis rond de browser beweegt en op verschillende elementen klikt, worden metingen en uitlijningen zichtbaar, gespecificeerd en impliciet weergegeven, zodat u een goed idee krijgt van waar alles zich verhoudt tot al het andere en waarmee u pixel perfectie kunt bereiken.
Net als bij veel andere inspectiehulpmiddelen voor de browser, kunt u eigenschappen en stijlen van alle gewenste elementen wijzigen. Maar met Visual Inspector, zoals u zou kunnen inspecteren, kunnen alle stijlen worden gewijzigd met visuele hulpmiddelen (schuifregelaars, kleurpipetten, enzovoort).
Eenmaal gewijzigd, kunt u op de CSS-uitvoer om de nieuwe stijlen die u hebt gemaakt te onthullen.
U kunt ook klikken Wijzigingen synchroniseren op de info tabblad en uw bewerkingen worden opgeslagen in uw account. Hierdoor kunt u die wijzigingen in de toekomst opnieuw bekijken, iets dat standaard niet door standaardinspecteurs wordt toegestaan.
Visual Inspector is een geweldige tool voor mensen die ervan genieten raffinage in de browser. Onderzoek wat al bestaat, breng de gewenste wijzigingen aan, exporteer deze wijzigingen of sla ze later op. En als u een upgrade uitvoert, kunt u ook samenwerken met teamleden. Ga het eens bekijken en laat ons weten wat je ervan vindt in de reacties!
Accentsconagua