Farger
Foreløpig i leksjonene har vi brukt farger skrevet i klartekst og med # foran litt om hverandre.
Altså; Det finnes tre måter å skrive at du vil ha en bakgrunnsfarge svart på. Du kan enten skrive “background-color: black”, “background-color: rgb(0, 0, 0)” eller “background-color: #000000”. Det er altså klartekst, RGB-verdier og HEX-verdier. Det finnes også RGBA og HSL, men disse skal vi ikke gå inn på i dette kurset.
Fargenavn i klartekst
Alle oppdaterte browsere støtter å skrive 140 forskjellige fargeverdier bare rett ut i klartekst. Det er jo en ulempe å ha et så begrenset antall farger å holde seg etter, men det er veldig praktisk å kunne litt fargenavn når du for eksempel skal teste litt fargebruk.
Her er et utvalg farger:
Disse er laget ved å style divs med slik kode:
{
padding: 10px;
background-color: red;
width: 100px;
height: 50px;
display: inline-block
}
En full oversikt over alle de 140 forskjellige fargene er her.
RGB-verdier
RGB-verdiene er skrevet på denne formen:
rgb( rød, grønn, blå)
De røde, grønne og blå fargene strekker seg fra 0 til 255, der 255 er mest farge og 0 er minst farge. Mange har kanskje hatt om fargelære på skolen og lært at alle farger sammenblandet blir svart. Her er det omvendt. 0 rød, 0 blå og 0 grønn blir svart. 255 rød, 255 grønn og 255 grønn blir hvit.
Dersom man vil ha en 100% rød, klar farge, skriver man rgb( 255, 0, 0), altså 255 rød, 0 grønn og 0 blå.
Grønn er rgb( 0, 255, 0).
Blå er rgb( 0, 0, 255).
Disse er laget ved å style divs med slik kode:
{
padding: 10px;
background-color: rgb(255,0,0);
width: 100px;
height: 50px;
display: inline-block
}
Hex-verdier
Hex-verdier er skrevet på denne formen:
#rrggbb
der rr er røde verdier, gg er grønne verdier og bb er blå verdier. De er heksadesimaler (16-tallssystemet) og spenner fra 00 – FF, der FF er det høyeste tallet. På samme måte som hos RGB er #FFFFFF det høyeste tallet og derfor hvit. #000000 er det laveste tallet og er svart.
Denne måten å skrive tall på er veldig mye brukt. Det er en enkel måte å skrive farger på, raskere enn rgb. Samtidig finnes det veldig mange fler kombinasjoner farger enn når man skriver klartekst.
Disse er laget ved å style divs med denne koden:
{
padding: 10px;
background-color: #FF0000;
width: 100px;
height: 50px;
display: inline-block
}
Det ble en kort leksjon denne uka om farger. Neste uke blir det fonter og skrifttyper! Det er kanskje kjedelig for noen med så mye teori, men det er veldig greit å kunne det grunnleggende. Når vi skal gå gjennom font-leksjonen, skal vi lære enda mer om styling av tekst. Så følg med neste uke.
Takk for tips! Gleder meg til fonter og skrifttyper neste uke 😀
Lisabeth: Så bra! 😀 Skal passe på at det blir litt mer utdypende enn dette!
Så utrolig kult at du deler dette med oss 😀
så spennende!:)
buroysfoto: Så bra du synes det 😀 Jeg syns det er gøy å lære bort og vise hvor gøy hjemmesider kan være!
Maiken: Så bra du syns! 😀
Ser du skrev på en annen blogg om at en dame så pen ut og hyggelig du prøver men hun ser ikke pen ut og stygge tatoveringer har hun . Man er ærlig og liker du ikke det så gå videre og lær deg oppdragelse før du forteller noen om det … lærte aldri din mor at vis du ikke har noe hyggelig og si så la vær… så lær deg den før du forteller noe til noen andre som er ærlig og vill hjelpe en som er stygg og ser ut som en mann …. vi alle prøvde og hjelpe henne mens du vill bare ha flere lesere ,er du som er falsk for faen 😂😂😂
Petter: Hei, Troll! For det første må du ha det veldig vondt med deg selv som skriver sånne ting om andre, for det andre bryr ikke alle seg like mye om utseende som det du gjør og for det tredje var jeg helt ærlig. Jeg syns personen det gjelder både er dritpen, kul og har rå tatoveringer 😀
Håper du får det bedre med deg selv etterhvert og skammer deg ihjel av kommentarene du skriver til andre <3