Attraktive udseende websteder er på deres egen måde et mini-mesterværk af internetalderen. Tilpasning kan være lige så let eller så kompleks som du ønsker, lige fra at ændre et WordPress-tema til at udvikle et websteds udseende fra start til slut.

Derefter vil du sandsynligvis komme på tværs af elementer, du nyder og farver, du ønsker at genbruge i dine egne projekter. I denne artikel vil vi vise dig de vigtigste forudsætninger for at få hjemmesider til at fortælle dig alt, hvad du vil vide.

Hvad er farven?

ColorZilla

Originalt oprettet til Firefox, er ColorZilla siden blevet tilgængelig på Chrome og dets relaterede browsere også.

Ved installation finder du en ekstra knap i brugergrænsefladen for begge browsere. Denne knap giver dig mulighed for at finde ud af farven på næsten alt online. Du kommer hurtigt til at indse, at ColorZilla gør meget mere end bare at identificere farver, da det også omfatter support til paletter.

Hvad er fonten?

WhatFont? (Chrome)

Strengt taget behøver du ikke WhatFont? udvidelse for at finde ud af skrifttypen på et websted, men det er langt den hurtigste måde at gøre det på. Alternativet er at åbne stilarket og gå på jagt gennem det.

Installer WhatFont? og du vil se et nyt ikon i din browser brugerflade. Medmindre du genstarter browseren helt, skal du opdatere den side, hvor du vil identificere skrifttyperne. Når du har gjort dette, skal du klikke på knappen i din browser.

En ny knap skal vises i øverste højre hjørne af websiden, og når du mus over tekst, skal skrifttypenavnet vises. Hvis du klikker på skrifttypen, vises yderligere oplysninger vedrørende dimensionering. Det vil også identificere de andre skrifttyper i "stacken", som er praktisk, hvis du vil se, hvilke alternativer webudviklere anser for deres påtænkte skrifttype.

Font Finder (Firefox)

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

Installer udvidelsen, og du får en ny mulighed i højreklikkontekstmenuen.

Når du finder noget, du vil identificere, skal du fremhæve det og derefter hente de tilgængelige muligheder. "Analysér udvælgelse" fortæller alt, hvad du nogensinde har ønsket at vide.

Den detaljer, den giver, er intet mindre end kæbefald. Hvis tekst er markeret som en "stack", vælger den den første skrifttype i stakken, du har installeret. Stakke slutter normalt med en generel betegnelse, som "sans-serif" i eksemplet ovenfor. I den usandsynlige hændelse er en af ​​de andre skrifttyper i stakken ikke installeret, det falder tilbage til systemets standard sans-serif ansigt.

Du kan også tilpasse elementer også via indstillingen "Juster element". Når udvidelsen beder dig om at indtaste en skrifttypefamilie, kan du gå vild. I vores eksempel ændrede vi næsten alle skrifttyper på Wikipedia til noget andet, der skabte den bizarre mash-up vist. Disse ændringer er ikke permanente og forsvinder, når du genindlæser siden.

"Erstat skrifttype (hele DOM)" giver dig mulighed for at ændre alle forekomster af en skrifttype på siden. Ikke en fan af Roboto (som vi bruger som vores vigtigste sans-serif)? Fremhæv denne mulighed, klik på "Roboto" fra listen over skrifttyper, der findes på siden, og indtast navnet på den skrifttype, du foretrækker at se. Igen er det ikke permanent, men det giver dig mulighed for at spille med designet af dine yndlingswebsteder, selvom det kun er midlertidigt.

Site Measurement

Sidelinjeren (Chrome)

"En hersker? Virkelig? "Vi hører dig spørge. Page Linjal er en skærm linjal, som er lidt forskellig fra, hvordan det lyder. Faktisk forstår vi fuldstændig enhver initial skepsis også.

Placeringsspørgsmål på internettet. Elementer på en side skal kun fordeles, eller de er ikke så tiltalende som de kunne være. Selvom disse oplysninger er særligt esoteriske til at vide, gør Page Ruler det muligt.

Installer det som om du ville have en anden udvidelse, og du vil have en anden knap i din browser-brugerflade. Bemærk, at du skal åbne en webside for at prøve udvidelsen - du kan ikke bruge en af ​​Chrome's indbyggede websider af sikkerhedsmæssige årsager.

Når du har klikket på knappen, får du en ekstra stribe information lige under adresselinjen, og du kan bruge musen til at klikke og trække en form ud, hvis dimensioner beregnes og vises langs ovennævnte bar . Udover dette har du også mulighed for at aktivere eller deaktivere nettet, selvom det kan hjælpe med nøjagtighed.

Hvis du ønsker dig, kan du også ændre farve på rektanglet fra standardblå. Uanset hvilken farve du vælger, vil den automatisk tilføje en grad af gennemsigtighed, så du kan se indholdet under det.

PageRuler fortjener en vis kredit for at have en særlig minimalistisk tilgang til dens funktioner, pakning af alle de væsentlige oplysninger i en lille bar langs toppen af ​​vinduet.

MeasureIt (Firefox og Chrome)

Mål Det gør den samme opgave som Page Ruler og er tilgængelig for både Firefox og Chrome.

Når du er installeret, skal du klikke på knappen, og du vil kunne klikke og trække for at oprette et rektangel. Ved siden af ​​rektanglet vil der være en pixeltælling, hvilket betyder at du kan få præcise målinger til positionering.

Hvis du er bekymret for at få målene rigtige med kun en mus, kan du justere størrelsen på det fremhævede område ved hjælp af piletasterne, hvilket gør præcision meget nemmere, end det lyder. Vi foreslår at kontrollere indstillingen "Område" i indstillingerne; det ændrer ikke, hvordan softwaren virker og giver kun dig en ide om det område, som rektanglet du har tegnet, tager op.

Vi vedder på, at du vil blive overrasket, når du ser, hvor mange pixels der er på skærmen og det område, de udgør, når de fremhæves. Hvis intet andet, bør det helt sikkert sætte udtrykket "skærm fast ejendom" i perspektiv.

Konklusion

Det tager et stykke tid at få det bedste ud af disse udvidelser, men de giver nogle gode oplysninger inden for rækkevidde. Du får hurtigt fat i dem, men hvis du har svært ved at erstatte skrifttyper, skal du huske, at navnene skal være præcise. "Comic Sans" virker ikke, mens "Comic Sans MS" (som det fremgår af Office) vil.

Husk at alle disse udvidelser kræver denne slags nøjagtighed i de oplysninger, du giver dem, og du vil være veludstyret til at bruge dem til deres fulde.