Attraktivt utseende nettsteder er på sin egen måte et mini-mesterverk av Internett-alderen. Tilpassing kan være så enkelt eller så komplisert som du ønsker, alt fra å endre et WordPress-tema for å utvikle et nettsteds utseende fra start til slutt.

Deretter vil du sannsynligvis komme over elementer du liker og farger du ønsker å bruke på nytt i dine egne prosjekter. I denne artikkelen vil vi vise deg hva som er viktig for å få nettsteder til å fortelle deg alt du vil vite.

Hva er fargen?

ColorZilla

Originalt opprettet for Firefox, har ColorZilla siden blitt tilgjengelig på Chrome og tilhørende nettlesere også.

Ved installasjon finner du en ekstra knapp i brukergrensesnittet for begge nettleserne. Denne knappen gir deg muligheten til å finne ut fargen på omtrent alt på nettet. Du kommer raskt til å innse at ColorZilla gjør mye mer enn bare å identifisere farger, da det også inkluderer støtte for paletter.

Hva er skriften?

WhatFont? (Krom)

Strengt tatt trenger du ikke WhatFont? utvidelse for å finne ut skriftstedet på et nettsted, men det er uten tvil den raskeste måten å gjøre det på. Alternativet er å åpne stilarket og gå på jakt gjennom det.

Installer WhatFont? og du vil se et nytt ikon i nettleserens brukergrensesnitt. Med mindre du starter nettleseren helt, må du oppdatere siden der du vil identifisere skrifter. Når du har gjort dette, klikker du på knappen i nettleseren din.

En ny knapp skal vises øverst til høyre på nettsiden, og når du mus over tekst, skal skrifttypenavnet vises. Hvis du klikker på skrifttypen, vil du få tilleggsinformasjon om størrelsen. Det vil også identifisere de andre skrifttyper i "stacken" som er praktisk hvis du vil se hvilke alternativer webutviklere anser for deres påtatte skrifttype.

Font Finder (Firefox)

En Firefox-eksklusiv utvidelse i samme vene som Chrome's WhatFont?

Installer utvidelsen, og du får et nytt alternativ i høyreklikk-kontekstmenyen.

Når du finner noe du vil identifisere, marker du det, og hent deretter de tilgjengelige alternativene for deg. "Analyser utvalg" vil fortelle alt du noen gang ønsket å vite.

Detaljene den gir, er ikke noe kjevefalt. Hvis tekst er merket som en "stabel", vil den velge den første skrifttypen i stakken du har installert. Stabler slutter vanligvis med en generell betegnelse, som "sans-serif" i eksemplet ovenfor. I det usannsynlige tilfelle er en av de andre skrifttypene i stakken ikke installert, det kommer tilbake til systemets standard sans-serif ansikt.

Du kan også tilpasse elementene også via "Adjust Element" alternativet. Når utvidelsen ber deg om å skrive inn en skriftfamilie, kan du gå vill. I vårt eksempel har vi forandret omtrent alle skrifttyper på Wikipedia til noe annet, noe som skaper den bisarre mash-upen som vises. Disse endringene er ikke permanente og forsvinner når du oppdaterer siden.

"Erstatt skrift (hele DOM)" lar deg endre alle forekomster av en skrift på siden. Ikke en fan av Roboto (som vi bruker som vår viktigste sans-serif)? Fremhev dette alternativet, klikk på "Roboto" fra listen over skrifter som er tilstede på siden, og skriv inn navnet på skriften du foretrekker å se. Igjen er det ikke permanent, men det lar deg spille med utformingen av favorittwebbene dine, selv om det bare er midlertidig.

Nettstedmåling

Sidelinjeren (Chrome)

"En linjal? Virkelig? "Vi hører deg spørre. Page Linjal er en skjerm linjal som er litt forskjellig fra hvordan det høres ut. Faktisk, vi ville helt forstå noen innledende skepsis også.

Plassering saken på nettet. Elementer på en side må bare fordeles, eller de er ikke så tiltalende som de kunne være. Selv om denne informasjonen er spesielt esoterisk å ønske å vite, gjør Page Ruler det mulig.

Installer det som om du vil ha en annen utvidelse, og du vil ha en annen knapp i nettleserens brukergrensesnitt. Merk at du må åpne en nettside for å prøve utvidelsen - du kan ikke bruke en av Chromes innebygde nettsider av sikkerhetshensyn.

Når du har klikket på knappen, får du en ekstra stribe med informasjon rett under adressefeltet, og du kan bruke musen til å klikke og dra ut en form, dimensjonene som blir beregnet og vist langs den nevnte linjen . Utover dette har du også muligheten til å aktivere eller deaktivere nettet, men det kan hjelpe med nøyaktighet.

Skulle du ønske deg det, kan du også endre farge på rektangelet fra standardblått. Uansett hvilken farge du velger, vil den automatisk legge til en grad av gjennomsiktighet slik at du kan se innholdet under det.

PageRuler fortjener litt kreditt for å ha en særlig minimalistisk tilnærming til sine funksjoner, og pakker all viktig informasjon inn i en liten bar langs toppen av vinduet.

MeasureIt (Firefox og Chrome)

Mål Det gjør samme oppgave som sidelinjeren og er tilgjengelig for både Firefox og Chrome.

Når du er installert, klikker du på knappen, og du vil kunne klikke og dra for å lage et rektangel. Ved siden av rektangelet vil det være en pixeltelling, noe som betyr at du kan få nøyaktige målinger for posisjonering.

Hvis du er bekymret for å få målingene riktig med bare en mus, kan du justere størrelsen på det uthevede området ved hjelp av piltastene, noe som gjør presisjon mye lettere enn det høres ut. Vi foreslår at du velger alternativet "Område" i innstillingene; det endrer ikke hvordan programvaren fungerer og bare gir deg en ide om området rektangelet du har tegnet tar opp.

Vi vedder på at du vil bli overrasket når du ser hvor mange piksler som er på skjermen og området de gjør når de blir markert. Hvis ingenting annet, bør det definitivt sette begrepet "skjerm fast eiendom" i perspektiv.

Konklusjon

Det tar litt tid å få det beste ut av disse utvidelsene, men de legger stor informasjon innen rekkevidde. Du kommer raskt til å ta tak i dem, men hvis du finner det vanskelig å erstatte fonter, husk at navnene må være nøyaktige. "Comic Sans" vil ikke fungere, mens "Comic Sans MS" (som det ser ut i Office) vil.

Husk at alle disse utvidelsene krever denne typen nøyaktighet i informasjonen du gir dem, og du vil være godt rustet til å bruke dem til sitt beste.