Attraktiva webbsidor är på egen hand ett mini-mästerverk av internetåldern. Anpassning kan vara lika enkelt eller så komplicerat som du önskar, allt från att ändra ett WordPress-tema för att utveckla en webbplatss utseende från början till slut.

Därefter kommer du sannolikt att komma över element som du tycker om och färger du vill återanvända i dina egna projekt. I den här artikeln visar vi dig väsentligheterna för att få webbplatser att berätta allt du vill veta.

Vad är färgen?

ColorZilla

Ursprungligen skapad för Firefox har ColorZilla sedan blivit tillgänglig på Chrome och dess relaterade webbläsare också.

Vid installationen hittar du en extra knapp i användargränssnittet för båda webbläsarna. Denna knapp ger dig möjlighet att ta reda på färgen på nästan allt på nätet. Du kommer snabbt att inse att ColorZilla gör mycket mer än att bara identifiera färger eftersom det även omfattar support för paletter.

Vad är typsnittet?

WhatFont? (Krom)

Strängt taget behöver du inte WhatFont? förlängning för att ta reda på en webbplatss typsnitt, men det är överlägset det snabbaste sättet att göra det. Alternativet är att öppna stilarket och gå på jakt genom det.

Installera WhatFont? och du får se en ny ikon i din webbläsare användargränssnitt. Om du inte startar webbläsaren helt, måste du uppdatera sidan där du vill identifiera typsnittet. När du har gjort det, klicka på knappen i din webbläsare.

En ny knapp ska visas i det övre högra hörnet av webbsidan, och när du mus över text ska teckensnittsnamnet visas. Om du klickar på teckensnittet kommer du att få ytterligare information om dimensionering. Det kommer också att identifiera de andra tecknen i "stacken" som är bekvämt om du vill se vilka alternativ webbutvecklare anser för sin avsedda typsnitt.

Font Finder (Firefox)

En Firefox-exklusiv utvidgning i samma åder som Chrome's WhatFont?

Installera förlängningen, och du får ett nytt alternativ i högerklick-snabbmenyn.

När du hittar något du vill identifiera, markera det och ta fram de alternativ som är tillgängliga för dig. "Analysera urvalet" kommer att berätta allt du någonsin ville veta.

Detaljerna som den ger är inget annat än käftfall. Om texten är markerad som en "stack" så väljer den första teckensnittet i stapeln som du har installerat. Stackar brukar sluta med en allmän term, som "sans-serif" i exemplet ovan. I det osannolika fallet kommer en av de andra typsnitten i stacken inte att installeras, det kommer att falla tillbaka till ditt systems standard sans-serif-ansikte.

Du kan också anpassa element också med alternativet "Adjust Element". När utvidgningen uppmanar dig att skriva in en typfamilj kan du gå vild. I vårt exempel förändrade vi nästan alla teckensnitt på Wikipedia till något annat, vilket skapade den bisarra mash-up som visas. Dessa ändringar är inte permanenta och försvinner när du laddar om sidan.

"Byt typsnitt (hela DOM)" kan du ändra varje förekomst av ett teckensnitt på sidan. Inte ett fan av Roboto (som vi använder som vår huvudsakliga sans-serif)? Markera det här alternativet, klicka på "Roboto" från listan över teckensnitt som finns på sidan och skriv in namnet på det teckensnitt du föredrar att se. Återigen är det inte permanent, men det låter dig spela med utformningen av dina favoritwebbplatser, även om det bara är tillfälligt.

Webbplatsmätning

Sidoregler (Chrome)

"En linjal? Egentligen? Vi hörs att du frågar. Sidoregulator är en skärmlinje som är lite annorlunda än hur det låter. Faktum är att vi helt klart förstår någon initial skepsis också.

Placeringsfrågor på webben. Element på en sida måste bara vara åtskilda, eller de är inte lika tilltalande som de kunde vara. Medan denna information är särskilt esoterisk att vilja veta, gör Sidoregler möjlig.

Installera det som om du skulle ha någon annan tillägg, och du får en annan knapp i din webbläsare. Observera att du måste öppna en webbsida för att prova förlängningen. Du kommer inte att kunna använda en av Chrome: s inbyggda webbsidor av säkerhetsskäl.

När du har klickat på knappen får du en extra informationsremsa direkt under adressfältet och du kan använda musen för att klicka och dra ut en form, vars mått kommer att beräknas och visas längs den ovannämnda fältet . Utöver detta har du också möjlighet att aktivera eller inaktivera gallret, men det kan hjälpa till med noggrannhet.

Om du önskar dig kan du också ändra färgen på rektangeln från standardblå. Oavsett vilken färg du väljer kommer den automatiskt att lägga till en viss transparens så att du kan se innehållet under det.

Sidoregler förtjänar lite kredit för att ha en särskilt minimalistisk inställning till dess funktioner, packning av all viktig information i en liten bar längst upp i fönstret.

MeasureIt (Firefox och Chrome)

Mät Det gör samma uppgift som Sidoregler och är tillgänglig för både Firefox och Chrome.

När du är installerad klickar du på knappen och du kan klicka och dra för att skapa en rektangel. Vid sidan om rektangeln blir ett pixelantal, vilket betyder att du kan få noggranna mätningar för positionering.

Om du är orolig att få mätningarna rätt med bara en mus, kan du justera storleken på det markerade området med piltangenterna, vilket gör precision mycket enklare än det låter. Vi rekommenderar att du kontrollerar alternativet "Area" i inställningarna; det ändrar inte hur mjukvaran fungerar och ger bara en uppfattning om det område rektangeln du har ritat tar upp.

Vi satsar på att du blir förvånad när du ser hur många pixlar som är på skärmen och det område de utgör när de markeras. Om inget annat borde det definitivt ställa termen "skärmfastigheter" i perspektiv.

Slutsats

Det tar ett tag att få det bästa av dessa tillägg, men de lägger stor information inom räckhåll. Du kommer snabbt att ta tag i dem, men om du har svårt att ersätta teckensnitt, kom ihåg att namnen måste vara exakta. "Comic Sans" fungerar inte, medan "Comic Sans MS" (som det visas i Office) kommer.

Kom ihåg att alla dessa tillägg kräver denna typ av noggrannhet i informationen du ger dem, och du kommer att vara väl rustad att använda dem till fullo.