Aantrekkelijk ogende websites zijn, op hun eigen manier, een mini-meesterwerk van het internettijdperk. Aanpassingen kunnen net zo gemakkelijk of zo ingewikkeld zijn als u wilt, variërend van het aanpassen van een WordPress-thema tot het ontwikkelen van het uiterlijk van een site van begin tot einde.

Vervolgens kom je waarschijnlijk elementen tegen die je leuk vindt en kleuren die je opnieuw wilt gebruiken in je eigen projecten. In dit artikel laten we je de essentie zien van het krijgen van websites om je alles te vertellen wat je wilt weten.

Wat is de kleur?

ColorZilla

Oorspronkelijk gemaakt voor Firefox, is ColorZilla sindsdien ook beschikbaar in Chrome en de bijbehorende browsers.

Tijdens de installatie vindt u voor beide browsers een extra knop in de gebruikersinterface. Deze knop geeft je de mogelijkheid om de kleur van vrijwel alles online te vinden. Je zult snel merken dat ColorZilla veel meer doet dan alleen kleuren identificeren, maar ook ondersteuning biedt voor paletten.

Wat is het lettertype?

WhatFont? (Chroom)

Strikt genomen hebt u de WhatFont niet nodig? uitbreiding om het lettertype van een website te achterhalen, maar het is verreweg de snelste manier om dit te doen. Het alternatief zou zijn om het stylesheet te openen en er doorheen te jagen.

WhatFont installeren? en je ziet een nieuw pictogram in de gebruikersinterface van je browser. Tenzij u de browser helemaal opnieuw start, moet u de pagina vernieuwen waar u de lettertypen wilt identificeren. Zodra u dit hebt gedaan, klikt u op de knop in uw browser.

Er verschijnt een nieuwe knop in de rechterbovenhoek van de webpagina en wanneer u met de muis over de tekst beweegt, moet de naam van het lettertype worden weergegeven. Als u op het lettertype klikt, krijgt u aanvullende informatie over de maatvoering. Het zal ook de andere lettertypen in de "stapel" identificeren, wat handig is als u wilt zien welke alternatieven webontwikkelaars overwegen voor hun beoogde lettertype.

Font Finder (Firefox)

Een exclusieve uitbreiding van Firefox in dezelfde geest als WhatFont van Chrome?

Installeer de extensie en u heeft een nieuwe optie in het contextmenu met de rechtermuisknop.

Wanneer u iets vindt dat u wilt identificeren, markeert u het en opent u de opties die voor u beschikbaar zijn. "Analyse Selectie" zal u alles vertellen wat u ooit wilde weten.

Het detail dat het biedt is niets minder dan verbluffend. Als de tekst is gemarkeerd als een "(stapel)", dan kiest het het eerste lettertype in de stapel die u hebt geïnstalleerd. Stapels eindigen meestal met een algemene term, zoals 'schreefloos' in het bovenstaande voorbeeld. In het onwaarschijnlijke geval dat een van de andere lettertypen in de stapel niet is geïnstalleerd, zal het terugvallen op de standaard schreefloos gezicht van uw systeem.

U kunt ook elementen aanpassen via de optie "Element aanpassen". Zodra de extensie u vraagt ​​om een ​​lettertypefamilie in te voeren, kunt u de wildernis ingaan. In ons voorbeeld veranderden we zowat elk lettertype op Wikipedia in iets anders, waardoor de bizarre mash-up werd weergegeven. Deze wijzigingen zijn niet permanent en verdwijnen wanneer u de pagina opnieuw laadt.

"Lettertype vervangen (volledige DOM)" stelt u in staat om elke instantie van een lettertype op de pagina te wijzigen. Geen fan van Roboto (die we gebruiken als onze belangrijkste schreefloze schreef)? Markeer deze optie, klik op "Roboto" in de lijst met lettertypen op de pagina en voer de naam in van het lettertype dat u graag wilt zien. Nogmaals, het is niet permanent, maar het staat je toe om te spelen met het ontwerp van je favoriete websites, zelfs al was het maar tijdelijk.

Site-meting

Page Ruler (Chrome)

"Een liniaal? Echt waar? "Horen we je vragen. Page Ruler is een schermliniaal die een beetje verschilt van hoe het klinkt. Eigenlijk zouden we ook alle aanvankelijke scepsis volledig begrijpen.

Positionering is belangrijk op het web. Elementen van een pagina moeten op dezelfde afstand worden geplaatst, of ze zijn niet zo aantrekkelijk als ze zouden kunnen zijn. Hoewel deze informatie bijzonder esoterisch is om te willen weten, maakt Page Ruler dit mogelijk.

Installeer het zoals bij elke andere extensie en je hebt een andere knop in de gebruikersinterface van je browser. Houd er rekening mee dat u een webpagina moet openen om de extensie uit te proberen. Om veiligheidsredenen kunt u een van de ingebouwde webpagina's van Chrome niet gebruiken.

Nadat u op de knop hebt geklikt, krijgt u een extra strook informatie direct onder de adresbalk. Met de muis kunt u klikken en een vorm slepen, waarvan de afmetingen worden berekend en weergegeven langs de bovengenoemde balk . Hiernaast heb je ook de mogelijkheid om het raster in of uit te schakelen, hoewel het kan helpen met nauwkeurigheid.

Als u dat wilt, kunt u de kleur van de rechthoek ook wijzigen in het standaard blauw. Ongeacht de kleur die u kiest, voegt deze automatisch een mate van transparantie toe, zodat u de inhoud eronder kunt zien.

Page Ruler verdient enige eer voor het hebben van een bijzonder minimalistische benadering van zijn functies, het verpakken van alle essentiële informatie in een kleine balk langs de bovenkant van het venster.

MeasureIt (Firefox en Chrome)

MeasureIt doet dezelfde taak als Page Ruler en is beschikbaar voor zowel Firefox als Chrome.

Na de installatie klikt u op de knop en kunt u klikken en slepen om een ​​rechthoek te maken. Naast de rechthoek is een aantal pixels, wat betekent dat u nauwkeurige metingen kunt krijgen voor positionering.

Als u zich zorgen maakt over de juiste afmetingen met slechts één muis, kunt u de grootte van het gemarkeerde gebied aanpassen met de pijltoetsen, waardoor precisie een stuk eenvoudiger wordt dan het klinkt. We raden aan om de optie "Gebied" in de instellingen te controleren; het verandert niets aan de manier waarop de software werkt en geeft je alleen een idee van het gebied dat de rechthoek die je hebt getekend, opneemt.

We zijn ervan overtuigd dat je verrast zult zijn als je ziet hoeveel pixels op het scherm verschijnen en het gebied dat ze vormen wanneer ze zijn gemarkeerd. Als het niets anders is, moet het de term 'schermvastgoed' absoluut in perspectief plaatsen.

Conclusie

Het duurt even om het beste uit deze extensies te halen, maar ze hebben geweldige informatie binnen handbereik gebracht. Je zult er snel grip op krijgen, maar als je het moeilijk vindt om lettertypen te vervangen, onthoud dan dat de namen exact moeten zijn. "Comic Sans" zal niet werken, terwijl "Comic Sans MS" (zoals het in Office wordt weergegeven) dat wel zal doen.

Vergeet niet dat al deze uitbreidingen dit soort nauwkeurigheid vereisen in de informatie die u hen geeft, en u bent goed uitgerust om ze ten volle te gebruiken.