Mitt IT-eventyr: farger

søndag 8. september 2013

Godt valg!

Heisann!

I morgen er det valgdag og det er en dag som føyer seg inn i en diskusjon om farger. Og hva har så en IT-blogg med en valgdag i Norge å gjøre?
Minst mulig! Eg har ikke tenkt å nytte dette til å sette mine ord på den norske IT-politikken. Det EG vil snakke om er farger!

Eg skrev i august i 2012 et innlegg om CSS og farger, som du kan lese her:
http://bamsehiet.blogspot.no/2012/08/css-og-farger.html

Om du leter litt videre på bloggen vil du finne både et innlegg om fonter OG om grafikk.
Kan være kjekt å få med seg.

Men tilbake til CSS og farger. Denne gangen her har eg lyst å vise kordan du på en god måte kan sette en farge på bakgrunnen som skifter farge etterhvert som brukeren scroller nedover siden.

Så om du skal lage en valgdag side kan du for eksempel starte med en farge øverst og få den til å ende opp i motsatt skala. Eksempelvis fra rødt til blått!

Her er koden:

body
{
background-image: -o-linear-gradient(bottom, rgb(107,136,254) 24%, rgb(212,146,40) 62%);
background-image: -moz-linear-gradient(bottom, rgb(107,136,254) 24%, rgb(212,146,40) 62%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(107,136,254)), color-stop(0.62, rgb(212,146,40)));
background-image: -webkit-linear-gradient(bottom, rgb(107,136,254) 24%, rgb(212,146,40) 62%);
background-image: -ms-linear-gradient(bottom, rgb(107,136,254) 24%, rgb(212,146,40) 62%);
background-image: linear-gradient(bottom, rgb(107,136,254) 24%, rgb(212,146,40) 62%);
}

Om du kopierer denne og limer den inn i notepad eller notepad++, som er det verktøyet eg personlig anbefaler for webutvikling (om du skal lære og gjøre ting selv), så vil det sikkert bli lettere å lese.

Det du skal legge merke til er at fargen du oppgir først på hver linje er den som skal ligge i bunn, mens farge nummer to er den du ser øverst. Om du ikke er godt kjent med web og farger vil eg du skal lese tidligere nevnte blogginnlegg, og trenger du en oppfriskning på det som går på selve farger kan du se her:

w3schools

Koden eg har presentert her i dag er ikke å anbefale om du har sider som er mindre enn en full skjerm. Da vil du få en repetisjon av fargeskalaen på siden din som ikke vil virke spesielt profesjonell.

Lykke til med å eksperimentere med denne kodesnutten og Godt Valg!

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!

lørdag 4. august 2012

CSS og farger

Hei!!

Endelig har vi fått litt fart på blogginnleggene. Og du lærer no å lage enkle html sider i et litt større tempo enn vi gjorde i starten! BRA!

Sist gang snakket eg litt om HTML og CSS.
For å repetere kjapt.
Denne linjen må ligge i <HEAD> - delen av html siden din for at css skal virke:
<link rel="stylesheet" type="text/css" href="style.css" />

Filen din trenger ikke hete style.css, men så lenge vi kun opererer med 1 CSS fil synes eg det er greit å bruke det som en standard. På større sider kan du om du sjekker kilden se at de har opptil flere css tilknytninger. Det kan gjerne være gunstig når man skal begynne med toppmenyer og menyer på venstresiden osv.

Det er mange veier til ROM. Som kjent fører alle veier dit. Og litt sånn er det med CSS og farger også.
I forrige blogg viste eg litt med HEX-koder. Svart og Hvit.Motsetninger av hverandre. Men det finnes jo så klart et hav av andre farger. Ikke alle farger er gode nok til å bruke på web. Derfor er det laget Charts som viser hva man kan bruke, med HEX-kodene.

For noen år tilbake ble det laget en liste med 216 gode farger å bruke på web. Stort sett skulle det holde, og det er den eg tar utgangspunkt i her.

Listen finner du her:
http://www.w3schools.com/cssref/css_colors.asp
Under overskriften 'Web Safe Colors?'

Bruk gjerne den som referanse til å begynne med, til du føler du har kontroll på CSS og farger.
Men det er flere måter å velge ut fargen på enn å bruke hex-koder som #ffffff

Du har for eksempel RGB, som står for Red, Green, Blue.
Velger du å bruke denne metoden vil det i din CSS-fil se slik ut:

body
{
background: rgb(255,0,0);
}

Som gir fargen rød. Setter du rgb(0,255,0); vil du få grønn.
Du skjønner sikkert tegningen etterhvert.

Om man tar skrittet videre kan man også definere rgba.
Bokstaven a står her for alpha channel.
Og hva er så en alpha channel? Her må eg si at eg lett kan tråkke i salaten og tar gjerne i mot innspill og forbedringer av blogginnlegget.
Men en alpha channel ifølge w3schools er en forlengelse av RGB som sier noe om gjennomsiktigheten til en farge.

Måten du bruker det på:

body
{
background: rgba(255,0,0,0.5);
}

Skalaen går fra 0.0 til 1.0.
Lek litt med denne for å få den ønskede effekten.

Så langt har vi nevnt: Hex og RGB.
Vi har enda en HSL; Hue, Saturation, Light.
Hue står for fargetone
Saturation står for metning.

I dag stoler eg på ordbøker :)

HSL skriver vi slik i CSS:

body
{
background: hsl(120, 65%, 75%)
}

Test det ut og se hvordan det virker. Også på HSL har vi en alpha channel. Da heter det HSLA.

Det siste eg vil nevne er Cross browser predefined farger.
Her er 147 farger som er predefinert med fargenavn istedet for koder.
Listen finner du her:
http://www.w3schools.com/cssref/css_colornames.asp

Skal du bruke farger på denne måten blir det slik i CSS:

body{
background: blue;
}

Det finnes veldig mange browsere. Ikke alle browsere støtter alt.
Som du sikker har merket henviser eg veldig ofte til www.w3schools.com sin sider.
Så langt har eg funnet det meste av det eg trenger der, og de kan være en grei side å bookmarke.
19.04.2012 skrev eg et blogginnlegg om Delicious.
Som er en smart måte å bookmarke sider på. Bruk denne og bookmark sidene eg har listet opp.

I dag har det vært mye å lese og lære. Men eg håper at du har fått littegrann verktøy å leke med siden din.
Neste gang tenker eg at vi snakker litt om fonter.

Som Dere alle etterhvert vet, så liker eg å friste med en liten video:

Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!