CSS Fundamentals: Arbeide med farger

Det er mange faktorer å ta hensyn til når du designer et nettsted; skrift, UX -flyt og mye mer. Et veldig viktig designelement er farge. Selv enkle beslutninger som merkevarefarge, kantfarge og bakgrunnsfarge gir en klar og merkbar innvirkning.

I denne artikkelen vil vi dekke grunnleggende om CSS-farger og lære å omdanne et HTML-nettsted til et upåklagelig nettsted.

Komme i gang med CSS -farger

Det er en bestemt måte å beskrive farger i CSS som en datamaskin kan forstå. Det gjøres vanligvis ved å dele fargen i forskjellige komponenter, beregne et blandet sett med primærfarger for å danne ønsket farge. Det er flere forskjellige måter å beskrive en farge i CSS.

Bruke fargenavn som søkeord

Det er omtrent 140 CSS -fargenavn som de fleste moderne nettlesere støtter. Det kan være så enkelt som rød eller cyan for fargesøkeordet. Selv om det hjelper med et moderat fargespekter, er du begrenset til noen få farger med null kontroll over nyanser og fargetoner. Det er her du må hoppe til det høyere utvalget av CSS -fargevalg.

/*Syntax*/
fargen rød;
farge: crimson;
farge: slateblue;

Bruke RGB -verdier

Mens du designer et nettsted eller en app, vil fargevalg betyr mye - det bør definitivt ikke være det siste du tenker på. I CSS kan du bruke tre metoder for å representere en RGB -farge. Dette er heksadesimale strengnotasjon, RGB -funksjonell notasjon og HSL -funksjonell notasjon. Her er en nærmere titt på hver av dem.

Hexadecimal String Notation

Den heksadesimale strengnotasjonen starter alltid med tegnet #. Etter dette tegnet angir du fargene ved hjelp av heksadesimale sifre i en bestemt fargekode. Strengen er ikke store og små bokstaver, men det er vanlig å bruke små bokstaver. Her er noen brukstilfeller:

#rrggbb

Det er den vanligste måten å beskrive en numerisk farge. Det er en helt ugjennomsiktig farge med røde, grønne og blå komponenter som 0xrr, 0xgg, og 0xbb henholdsvis.

#rrggbbaa

Den følger RGB -kriteriene som er skissert ovenfor med en alfakanal som håndterer fargenes renhet. Jo lavere 0xaa verdien er, jo mer gjennomskinnelig blir fargen.

#rgb

Hvis du har farge #556677, du kan ganske enkelt skrive det som #567 siden den representerer 0xrr, 0xgg, og 0xbb henholdsvis. For eksempel, #000 (eller #000000) er svart mens #fff (eller #ffffff) er hvit.

#rgba

Den følger kriteriene ovenfor med en alfakanal spesifisert av 0xaa for å kontrollere ugjennomsiktigheten.

RGB funksjonell notasjon

RGB funksjonell notasjon representerer farger ved hjelp av røde, grønne og blå komponenter. Det er definert ved hjelp av rgb () -funksjon som godtar inngangsparametere i form av primære røde, grønne og blå komponenter (og en valgfri alfakanal). De røde, grønne og blå verdiene må være et heltall mellom 0 til 255 (inkludert), eller en prosentandel som varierer fra 0% til 100%. På den annen side godtar alfakanalen verdier fra 0,0 (helt gjennomsiktig) til 1,0 (helt ugjennomsiktig). Den aksepterer også prosentverdi fra 0% (samme som 0,0) og 100% (samme som 1,0).

/*Syntax*/
farge: rgb (rr, gg, bb);
farge: rgba (rr, gg, bb, a);

HSL funksjonell notasjon

HSL funksjonell notasjon representerer farge ved hjelp av fargetone, metning og lysstyrke. Det ligner veldig på rgb () funksjon når det gjelder bruk. Du kan enkelt finne hex -verdien for en hvilken som helst farge på dataskjermen. I denne fargemetoden definerer fargen den faktiske fargen i henhold til posisjonen på fargehjulet. Metning er prosentandelen grå med maksimal fargetone. Lysstyrke overfører fargen fra det mørkeste til det lyseste mulige utseendet når den øker.

Fargetonen (H) er angitt av vinkelenheten som støttes i CSS. Det inkluderer deg, rad, grad, og sving. Metning (S) angir prosentandelen av den endelige fargen som består av fargetone. Lysstyrkekomponenten (L) definerer grånivået.

/*Syntax*/
farge: hsl (XXdeg, XX%, XX%);
farge: hsl (XXturn, XX%, XX%);

Bruke farger på HTML Elements

I CSS, farge egenskap definerer forgrunnsfargen på innholdet, og bakgrunnsfarge definerer bakgrunnsfargen til innholdet strukturert av HTML. Når et element gjengis, kan du bruke fargeegenskapene til å style det.

Fargeiendom for tekster

De farge eiendom brukes når du tegner tekst og når du trenger noen form for tekstdekorasjoner. Du kan bruke tekst-dekorasjon-farge eiendom for å gjengi understreker, overstreker eller streker gjennom linjer i forskjellige farger. Du kan endre bakgrunnsfargen på teksten ved å bruke bakgrunnsfarge eiendom. Du kan bruke en skyggeeffekt på tekst ved hjelp av tekst-skygge eiendom. Du kan velge tekst-vekt-farge mens du tegner frem symboler i tekstfelt.

Fargeiendom for esker

Som du vet, følger alt på en webside boksmodellen. Dermed er hvert element en eske med en slags innhold og valgfri polstring, kant og margområde. Du kan bruke bakgrunnsfarge eiendom når det ikke er noe forgrunnsinnhold. Når du tegner en linje for å skille kolonnene i en tekst, kan du bruke kolonne-regel-farge eiendom for det. Det er en kontur-farge eiendom for å farge omrisset. Vær oppmerksom på at en kontur er forskjellig fra grensen - den fungerer som en fokusindikator.

Fargeiendom for grenser

Ethvert HTML -element kan ha en kantlinje. Du kan stille inn grensefarge eiendom som kant-topp-farge, kant-høyre-farge, kant-bunn-farge, og kant-venstre-farge for å angi kantfargen på tilsvarende sider. Det er god praksis å bruke shorthand -eiendommen.

De border-inline-start-farge egenskapen lar deg farge kantene på grensen som er nærmest begynnelsen. På den annen side, border-inline-end-color egenskap lar deg farge slutten av starten på tekstlinjene i en boks. Selv om det varierer avhengig av din skrivemodus, tekstorientering, og retning.

Innpakning: Farge og tilgjengelighet

Selv om et vakkert designet nettsted er sterkt påvirket av fargen som brukes, bør du alltid sørge for at det er tilgjengelig. Feil bruk av farger kan resultere i tap av betydelig trafikk på nettstedet ditt.

Det er helt opp til deg å bruke heksadesimale strengnotasjoner, fargenavn eller RGB -verdier. Bare sørg for at du bruker farger for å styrke eksisterende tekst, og la den følge et bestemt visuelt hierarki. Å lære mer om fargelære og lage din egen palett er en enestående idé hvis du er en spirende webutvikler. Inntil da, glad og fargerik koding!

Hvordan bruke fargeteori til å heve dine kreative prosjekter

Ved å bruke de riktige fargene på den riktige måten kan du ta dine kreative prosjekter til et helt nytt nivå.

Les neste

Om forfatteren