CSS arbeidskrav 3

Her er arbeidet vi gjorde i gruppe i CSS timen 8. oktober.

I arbeidet laga vi eksempel på bruk av :

Bakgrunnsbilete
Bakgrunnsfarge
Borders
Gradient

 

Bakgrunnsbilete

eksempel: https://minerva.hivolda.no/~oddemart/mid131/cssgruppearbeid/bakgrunnsbilde.html

For å legge inn eit bakgrunnsbilete ved bruk av css-koding bruker ein koda under style:
body {
background-image:url (biletet);
}

Då sett ein inn eit bilete i bakgrunnen av den aktuelle html sida ein jobbar med. I eksempelet har vi brukt eit veldig kjedelig bilete som nesten ser ut som ein enkel bakgrunnsfarge.

Bakgrunnsfarge

eksempel: https://minerva.hivolda.no/~oddemart/mid131/cssgruppearbeid/bakgrunnsfarge.html

Istadenfor eit bilete i bakgrunnen kan ein bruke ein enkel farge. For å få fram denne fargen skrive ein inn denne koda under style taggen i koding til den aktuelle html sida:
body {
background-color:#din farge
}

Bak # skriv ein inn koda til den fargen ein vil ha (vi brukte for eksempel #199DC5 for å få fram den fargen vi har på nettstaden).

Borders

eksempel:https://minerva.hivolda.no/~oddemart/mid131/cssgruppearbeid/bakgrunnsfarge.html

Borders kan ein bruke for å lage eit ramme rundt det ein vil i css. I vårt eksempel valgte vi å ramme inn teksten og linkane. for å lage ein border bruker ein for eksempel følgande kode under style:

p {
border: #FF0004 solid thin;
border-width: 5px;
width:30%;
}

Her har vi valgt å ramme inn all tekst i <p>.  #FF00004 står for farge, solid for å skape ei solid ramme og thin gjer den tynn.
border-width viser til tjukkelsen på ramma, mens width er satt å prosent etter kor stor % av sida ramma skal dekke.

Gradient

Eksempel: https://minerva.hivolda.no/~oddemart/mid131/cssgruppearbeid/gradient.html

Gradient er eit verktøy ein brukar for å skape ei effekt der fargar sklir inn i kvarandre i ein flytande overgang. Vi brukte følgande kode under style i vår html side:
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}

Ein kan bruke gradients i f.eks bakgrunnsfarge for å gjere det litt meir spennande.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>