Mitt IT-eventyr: css

Viser innlegg med etiketten css. Vis alle innlegg

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!

torsdag 23. august 2012

CSS og grafikk

Heisann!

Eg har tidligere lovet at eg skal skrive litt om CSS og grafikk. Og ingenting er vel en bedre knagg å henge det på en sangen der vi synger: "med blanke ark og fargestifter til.."

Vi lager oss en ny html side. Som vi kaller index.html Om du har glemt hvordan, så kan du se her. Eg tar også med linjen som henviser til css filen. Lag en ny css fil som du kaller style.css. Og som vanlig holder vi oss til Charset UTF-8

index.html:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Grafikkeksempel med CSS</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</HEAD>
<BODY>

</BODY>
</HTML>

Lagre filen index.html i en ny mappe. Lag så en undermappe som du kaller images

For øyeblikket har eg utelatt å legge inn noe under <BODY> - taggen. Grunnen til det er at vi no skal finne oss et img å lage grafikk med.

Ikke alle bilder er bra til den øvelsen vi no skal gjøre; husk at vi skal gjerne ha tekst opp bakgrunnen og da er det best å ha en motsetting av skrift fargen. Skal du ha en mørk farge på skrift er en lys bakgrunn best.

Eg søkte på google med søkeord paper.gif og fant dette bildet.

Det vi nå skal gjøre er å dekke hele bakgrunnen med dette bildet, det vil gi siden vår en effekt av å være et papir. Finn et lignende bilde og lagre det i undermappen images. For denne øvelsen er det ikke så viktig hva du velger som bakgrunnsbilde, men det er greit å ha i bakhodet at en dårlig bakgrunn fort kan ødelegge helhetsinntrykket av siden.

La oss lage filen style.css, Charset UTF-8 og lagre denne i samme mappe som vi la index.html.

Ta style.css opp i notepad og legg inn følgende kode:

body
{
background-image:url('images/paper.gif');
}

Som du ser av taggen så er det området på siden din som heter BODY som vil bli endret.

Det vi ønsker å endre er bakgrunns bildet og vi legger også inn linken til dette bildet.

Som du ser har vi fremdeles ikke lagt inn noe under <BODY> i vår html fil.

Lagre begge filene og åpne index.html i en nettleser. Se om du kan finne flere bakgrunnsbilder og lek litt med de på samme måte.

Samtidig kan det være greit å gå gjennom de andre blogginnleggene eg har publisert om html og css for å teste hvordan siden nå vil se ut, med tekst og bilder oppå denne bakgrunnen.

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!

mandag 13. august 2012

Css og fonter Del 2

Hei igjen!

Vet at eg lovet et innlegg om CSS og grafikk, men aller først vil eg at vi skal gå litt videre med fonter. Forrige innlegg snakket eg litt om de fem store nettleserne og foreslo at du kanskje kunne laste de ned.
I innlegget om fonter la vi inn en font som heter Sansation_Light, har du testet den siden i Internet Explorer? Virker ikke helt slik du hadde forventet kanskje..
Internet Explorer krever en annen type format på fontene. Det vil si at vi må skaffe oss den og for vårt bibliotek. Bruk google.com og søk på Sansation_Light.eot, pakk den ut og legg den på samme sted som den andre fonten.

Vi har allerede i vår CSS fil laget klart for denne fonten, så om du ikke allerede har lagt inn resten av banen, så er dette et godt tidspunkt å gjøre dette på.

Oppdater din Internet Explorer 9, og se at dette endrer seg! :)

Nå ser du kanskje viktigheten av å teste i mer enn en nettleser, og kanskje du også etterhvert ser hvor viktig det er å åpne for i dine CSS filer muligheten for at alle brukerne kan få fullt utbytte av det du har laget.

Kanskje du nå kan laste ned flere fonter og teste.

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!

fredag 10. august 2012

CSS og fonter

I sist innlegg lovet eg å skrive et innlegg om CSS og fonter.
Den siste CSS standarden heter CSS3, og det er denne eg har tatt utgangspunkt i når eg skriver dette innlegget.
Som alltid så refererer eg til www.w3schools.com sine sider.
Og linken til CSS3 er: http://www.w3schools.com/css3/default.asp

Om du har brukt CSS til å behandle font tidligere så er det kanskje noen nye ting å lære seg.

Det fine med CSS3 kontra det som tidligere har vært tilfelle er at man no kan bruke hvilken font man ønsker.

Hver oppmerksom på at det ikke er alle browsere (nettlesere) som støtter det samme, derfor vil det i eksemplene bli definert på en måte slik at flere browsere støtter dine CSS krumspring.
Browserene det henvises oftest til er: Firefox, Chrome, Safari, Opera og Internet Explorer. Det kan kanskje være artig å se siden din i flere browsere etterhvert, så om du ikke har lastet de ned allerede kan det være greit. Om ikke annet enn for å teste noe annet enn det du vanligvis bruker.

Når det gjelder fonter finnes det flere typer. Du kan lese om de her http://www.fileinfo.com/filetypes/font
Du kan gjerne lese litt der om .ttf .otf og .eot

Til dette blogginnlegget synes eg det kan være greit å lage en ny html side og css fil. Om du velger å bruke det du har startet på går det også helt fint.

Mal:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
</BODY>
</HTML>

Du må også lage style.css om du velger å begynne på nytt (legg disse to filene i en ny mappe.)

Den fonten vi skal bruke heter Sansation_Light. Om du ikke har den bør du laste den ned. Et kjapt søk på google.com gir deg muligheten til det.
Om du ikke har en winzip versjon som fungerer og ikke har lyst å kjøpe til 30 USD så går det an å laste ned alternativer. Denne gangen valgte eg å laste ned 7-zip og legge fonten i en mappe som heter 'sansation' som er en undermappe av den du har lagret siden din i.

Igjen velger eg å bruke <h4> som tag til teksten. Legg inn tekst og lukk igjen med </h4>
For å helt tydelig se forskjell så lager eg også en tekst med <h5> taggen. Husk å lukke igjen etter du har skrevet det du skal.

Min html side ble seende slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta name="author" content="Brumle Blichfeldt" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
<h4>Dette er et forsøk på å bruke CSS3 og @font-face</h4>
<h5>Her er en tekst som ikke er modifisert</h5>
</BODY>
</HTML>

Om du ser etter har eg også lagt inn at det er eg som har laget siden og eg har valgt charset UTF-8. Om du følger de oppskriftene eg tidligere har lagt ut på bloggen vet du at eg bruker UTF-8 uten BOM. Derfor har eg valgt dette charset.

CSS filen vår. Her skal vi legge inn det som får skriften til å endre seg. (Forutsetter at du har fonten)

Vi skal bruke en funksjon som heter @font-face. Ved å bruke funksjonen kan du bruke den fonten du selv måtte ønske.

vi legger inn i style.css

@font-face
{
font-family: minH4font;
src: url('sansation/Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9+ */
}

font-family blir på en måte en tag eller krok om du vil der du henger på informasjon om hvilken font du vil bruke. Så når vi etter på skal fortelle hva som skal endres, så kan vi fortelle at vi ønsker å knytte teksten vår til den font-family som heter minH4font.
Som du ser at url'en eg har valgt har eg en mappe som heter sansation der eg har lagt denne fonten inn. Om du skal få dette til å fungere i IE9 må du ha Sansation_Light.eot også tilgjengelig.

Neste skritt er å legge inn følgende i style.css

h4
{
font-family:minH4font;
}

Dette skal få teksten du la inn mellom <h4> og </h4> til å endre seg, mens teksten du la inn mellom <h5> og </h5> vil være som den var.

Om du vil lese litt mer om css og fonter kan dette kanskje være en god side å starte på:
http://www.w3schools.com/css/css_font.asp

Der finnes litt forskjellige videoer på youtube av ymse kvalitet, men om du ønsker å titte ekstra på det kan du kanskje plukke opp noen tips. Som for eksempel siden http://www.fontsquirrel.com/ Denne refereres det mye til!

I neste blogginnlegg om CSS vil eg vise noen andre små triks som kan lage en litt kul bakgrunn på din hjemmeside. For eksempel noe som ligner på et tregulv.

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!

fredag 3. august 2012

HTML Kodeskriving VI

Hei igjen!

Etter forrige blogginnlegg fikk eg tilbakemelding om at det å skrive HTML egentlig ikke var programmering siden det ikke skulle kompileres. Eg ser veldig mange steder på nett at det omtales som HTML programmering, men lytter til vedkommende og omdøper det til Kodeskriving. Så får resten av Dere velge selv :)

Sommeren er over og det er tid for å ta fatt på nye blogginnlegg.
Siste innlegg var av det korte slaget, så eg regner med at du er klar for å ta fatt på nye utfordringer.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<img src="images/bilde2.jpg" width="200" height="200" alt="bilde 2" /><br />
<h4>Dette bildet er tatt på forsommeren av en iPhone4 og redigert av en iPhone4S med en liten app</h4>
<br />
<h4>Bildet er tatt av Brumle Blichfeldt</h4>
</BODY>
</HTML>

Nå har vi et godt utgangspunkt for ett av temaene eg vil ta opp; CSS
Men før eg skal gå inn på det temaet vil eg fortelle om noe som heter 'id'
'id' er en Global attributt. Det vil si at når du har tildelt et element den attributten vil det elementet kunne adresseres av blant annet en CSS fil. Eller et Javascript.
Vi skal etterhvert se på CSS. Det står for Cascading Style Sheets og er blitt mer eller mindre standard for måten layout/grafikk defineres på en html side.
På side 2 har vi et bilde, eller et <img>. Dette kan vi tildele en 'id'
La oss kalle bilde for bilde2. Bak taggen <img> som definerer dette bildet legger vi til attributten slik. id="bilde2"

Da vil html kode for side2.html se slik ut:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
</HEAD>
<BODY>
<img src="images/bilde2.jpg" id="bilde2" width="200" height="200" alt="bilde 2" /><br />
<h4>Dette bildet er tatt på forsommeren av en iPhone4 og redigert av en iPhone4S med en liten app</h4>
<br />
<h4>Bildet er tatt av Brumle Blichfeldt</h4>
</BODY>
</HTML>

Med CSS kan vi definerer farger, vi kan dele inn siden vår i deler (for senere å bygge menyer), vi kan bestemme posisjonen til elementene ved å knytte css opp mot 'id'en som vi nettopp definerte, vi kan endre tekst; font og farger.

Nok snakk om CSS. La oss opprette en css fil og sette i gang! Eg tar utgangspunkt i at du no vet hvordan du skal opprette nye dokumenter til websiden. Lag en ny tom side som du lagrer som style.css
Dette skal du lagre i samme mappen som dine html sider. Har du gjort det rett vil ikonet i mappen se ut som et papirark med et tannhjul på og under egenskaper vil du få beskjed om at det er en css fil. Egenskapene til en fil finner du ved å høyreklikke.
La style.css bare være tom for øyeblikket. VI kommer fort nok i gang med tastingen.

Nå skal vi knytte sammen html sidene dine og css filen.
Det gjør vi ved å legge inn følgende informasjon inn i <HEAD>-taggen:

<link rel="stylesheet" type="text/css" href="style.css" />

Dette gjør du på begge html sidene dine.Grunnen til dette er, og det er også hovedformålet med CSS, at du da kan endre fellesinformasjon ett sted.
Tenk deg at du har laget 15-20 html sider og må endre informasjon hele tiden på alle. Det er tungvint!

Din <HEAD>-tag på begge sidene skal se slik ut:

<HEAD>
<TITLE>HER SKAL VI LEGGE INN TITTELEN</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>

Nå skal vi legge inn den første informasjonen i vår style.css
Lim inn følgende:

body
{
background: #000000;
}

Du skjønner kanskje alt no at noe skal skje med bakgrunnen på websidene.
Lagre style.css og om du allerede har sidene dine oppe, Trykk F5.

#000000 er en HEX kode for fargen svart. Der finnes andre måter å definere farger på med CSS, men eg foretrekker personlig HEX-kodene.

På min side2.html valgte eg å skrive littegranne skrift med <H4>.
<H4> kan vi også behandle med CSS.
Legg inn følgende:

h4
{
color: #ffffff;
}

#ffffff er koden for fargen hvit.
Du ser måten eg skriver koden inn i CSS på.
Element som skal endres på
Åpningsbracket
Hva som skal endres: hvordan;
Lukkebracket

Du har no fått en liten smakebit på CSS. Kanskje du kan endre litt på fargene selv. Om du har lest mine tidligere blogginnlegg om det heksadesimale tallsystem så vet du at det går fra 0-9 og videre fra A-F. Av de 6 tallene du kan endre på kan du erstatte en 0 med hvilket som helst av de tallene i det heksadesimale system.

Skal snakke litt mer om css og farger i et senere innlegg!

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!