CSS Fundamentals: Arbejde med farver

Der er mange faktorer at overveje, når man designer et websted; skrifttype, UX -flow og meget mere. Et meget vigtigt designelement er farve. Selv simple beslutninger som mærkefarve, kantfarve og baggrundsfarve giver en klar og mærkbar effekt.

I denne artikel vil vi dække det grundlæggende i CSS-farver og lære at omdanne et HTML-websted til et upåklageligt websted.

Kom godt i gang med CSS -farver

Der er en bestemt måde at beskrive farver i CSS, som en computer kan forstå. Det gøres typisk ved at opdele farven i forskellige komponenter, beregne et blandet sæt primærfarver for at danne den ønskede farve. Der er flere forskellige måder at beskrive en farve i CSS på.

Brug af farvenavne som søgeord

Der er cirka 140 CSS -farvenavne, som de fleste moderne browsere understøtter. Det kunne være så enkelt som rød eller cyan for farveordet. Selvom det hjælper med et moderat farveområde, er du begrænset til et par sæt farver med nul kontrol over nuancer og nuancer. Det er her, du skal springe til det højere udvalg af CSS -farveindstillinger.

/*Syntax*/
farve: rød;
farve: crimson;
farve: slateblue;

Brug af RGB -værdier

Mens du designer et websted eller en app, vil farveskema betyder meget - det burde bestemt ikke være det sidste, du overvejer. I CSS kan du bruge tre metoder til at repræsentere en RGB -farve. Disse er hexadecimal strengnotation, RGB -funktionel notation og HSL -funktionel notation. Her er et nærmere kig på hver af dem.

Hexadecimal streng notation

Hexadecimal strengnotation starter altid med tegnet #. Efter dette tegn angiver du farverne ved hjælp af hexadecimale cifre i en bestemt farvekode. Strengen er ikke store og små bogstaver, men det er konventionelt at bruge små bogstaver. Her er nogle brugssager:

#rrggbb

Det er den mest almindelige måde at beskrive en numerisk farve. Det er en fuldstændig uigennemsigtig farve med røde, grønne og blå komponenter som 0xrr, 0xgg, og 0xbb henholdsvis.

#rrggbbaa

Det følger RGB -kriterierne beskrevet ovenfor med en alfakanal, der håndterer farvens renhed. Jo lavere 0xaa værdien er, jo mere gennemskinnelig bliver farven.

#rgb

Hvis du har farve #556677, du kan simpelthen skrive det som #567 da det repræsenterer 0xrr, 0xgg, og 0xbb henholdsvis. For eksempel, #000 (eller #000000) er sort, mens #fff (eller #ffffff) er hvid.

#rgba

Det følger ovenstående kriterier med en alfakanal angivet af 0xaa at kontrollere opacitet.

RGB funktionel notation

RGB funktionel notation repræsenterer farver ved hjælp af røde, grønne og blå komponenter. Det er defineret ved hjælp af rgb () funktion som accepterer inputparametre i form af primære røde, grønne og blå komponenter (og en valgfri alfakanal). De røde, grønne og blå værdier skal være et helt tal mellem 0 til 255 (inklusive) eller en procentdel, der varierer fra 0% til 100%. På den anden side accepterer alfakanalen værdier fra 0,0 (helt gennemsigtig) til 1,0 (fuldstændig uigennemsigtig). Det accepterer også procentværdi fra 0% (samme som 0,0) og 100% (samme som 1,0).

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

HSL funktionel notation

HSL funktionel notation repræsenterer farve ved hjælp af nuance, mætning og lysstyrke. Det ligner meget rgb () funktion med hensyn til brug. Det kan du let find hex -værdien for enhver farve på din computerskærm. I denne farvemetode definerer farven den faktiske farve i henhold til placeringen på farvehjulet. Mætning er procentdelen af ​​grå med den maksimalt mulige farvetone. Lysstyrke overfører farven fra sit mørkeste til det lyseste mulige udseende, når den øges.

Farvetonen (H) er angivet af den understøttede vinkelenhed i CSS. Det omfatter deg, rad, grad, og tur. Mætning (S) angiver procentdelen af ​​den endelige farve, der består af nuance. Lysstyrke (L) -komponenten definerer gråniveauet.

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

Anvendelse af farver på HTML Elements

I CSS, farve egenskab definerer forgrundens farve på indholdet og baggrundsfarve definerer baggrundsfarven på indholdet struktureret af HTML. Når et element gengives, kan du bruge farveegenskaberne til at style det.

Farveejendom til tekster

Det farve ejendom bruges, når du tegner tekst, og når du har brug for nogen form for tekstdekorationer. Du kan bruge tekst-dekoration-farve ejendom til at gengive understregninger, overstregninger eller gennemstrebningslinjer i forskellige farver. Du kan ændre tekstens baggrundsfarve ved hjælp af baggrundsfarve ejendom. Du kan anvende en skyggeeffekt på tekst ved hjælp af tekst-skygge ejendom. Du kan vælge tekst-vægt-farve mens du tegner vægt symboler i tekstfelter.

Farveejendom til æsker

Som du ved, følger alt på en webside boksmodellen. Hvert element er således en kasse med en slags indhold og valgfri polstring, kant og margenområde. Du kan bruge baggrundsfarve ejendom, når der ikke er noget forgrundsindhold. Når du tegner en linje for at adskille kolonnerne i en tekst, kan du bruge kolonne-regel-farve ejendom for det. Der er en kontur-farve ejendom til at farve omridset. Bemærk, at en kontur er forskellig fra grænsen - den fungerer som en fokusindikator.

Farveejendom til grænser

Ethvert HTML -element kan have en grænse. Du kan indstille kantfarve ejendom som kant-top-farve, kant-højre-farve, kant-bund-farve, og kant-venstre-farve for at indstille kantfarven på de tilsvarende sider. Det er dog god praksis at bruge stenografi -ejendommen.

Det border-inline-start-farve egenskab lader dig farve kanterne af den kant, der er tættest på begyndelsen. På den anden side er border-inline-end-farve egenskab lader dig farve slutningen på starten af ​​tekstlinjerne i en boks. Selvom det varierer afhængigt af din skrivemåde, tekstorientering, og retning.

Indpakning: Farve og tilgængelighed

Selvom et smukt designet websted er stærkt påvirket af den anvendte farve, skal du altid sørge for, at det er tilgængeligt. Forkert brug af farve kan resultere i tab af betydelig trafik på dit websted.

Brug af hexadecimale strengnotationer, farvenavne eller RGB -værdier er helt op til dig. Bare sørg for, at du bruger farver til at styrke eksisterende tekst, og lad den følge et bestemt visuelt hierarki. At lære mere om farveteori og oprette din egen palet er en fremragende idé, hvis du er en spirende webudvikler. Indtil da, glad og farverig kodning!

Sådan bruges farve teori til at løfte dine kreative projekter

Ved at bruge de rigtige farver på den rigtige måde kan du tage dine kreative projekter til et helt nyt niveau.

Læs Næste

Om forfatteren