VN:F [1.9.3_1094]
Rating: 5.0/5 (1 vote cast)
Eftersom så många vill veta hur man ändrar sin design tänker jag nu stegvis göra en guide. Det är så många delar som innefattar och jag vill lära ut er allt jag kan. Därför kan ni nu hitta detta under ”design tips”.
Det första jag någonsin ville lära mig då jag skulle designa om min blogg var hur man ändrade bakgrundsfärg, det är en del som ger ett stort intryck på andra. Varesig det är en färg eller en bild man valt.
body {
margin: 0px;
padding: 0px;
background: #fff;
}
Om ni vill ändra bakgrunden så ska ni leta efter ”body” i stilmallen, det är den första delen som vi kan se. Margin och padding * vill ni ha på 0 i detta sammanhang eftersom vi idag inte ska göra något avancerat med det.
Det vi ska fokusera på är själva färgen, ”background” eller ”background-color” är det man skall ändra på. Färgerna skriver man oftast i hexadecimala koder (#FFFFFF = vit), dvs att man skriver färgerna i 6 tecken i antingen bokstäver och/eller siffror.
Vill du istället ha en bild som bakgrund kan du istället skriva in.
background: url(bildens url-adress);
”URL” måste anges för att webbläsaren ska förstå att det är en url-adress som skall läsas av och därefter skriver man in sin url-adress (bildens adress, du hittar den i adressfältet då du har endast bilden uppe) innanför två paranteser ( såhär ), sedan skall man alltid avsluta med ett semikolon ; för att webbläsaren skall veta att denna rad är slut.
Ännu är vi inte klara, ibland kan bilder bli väldigt stora så för att spara tid till att ladda upp sidan så kan vi istället göra små bilder som repeteras.
background: url(bildens url);
background-repeat: repeat-x eller repeat-y;
Repeat-x – repeteras bilden horisontellt, dvs på ”bredden”
Repeat-y – repeteras bilden vertikalt, dvs på höjden.
Detta är ett jättebra tips som man skall ha i bakhuvudet, att använda så små bilder som möjligt och istället repetera dem.
Exempel på repetition av bild:

Ni ser den lilla bilden till vänster kan repeteras på ett vis så att bilden egentligen ser ut att vara stor. Vill man göra på detta vis på exempelbilden så repteras den som ni ser horisontellt och då använder man ”repeat-x”.
* Vad margin och padding är kan ni se här [länk].
> Design tips 08:24, 12 juli 2010 2 Kommentarer »