Melinda & Julia

Rundade hörn i bloggen
Publicerat den 16/10 2010, kl. 21.42

Jag fick en fråga om hur man gör hörnen i bloggen rundade. Det kanske låter jättesvårt men det är det faktiskt inte. Det är faktiskt bara att kopiera och klistra in (som med allt annat gällande bloggdesign egentligen..) Hur som helst, här kommer det:

Detta sker i stilmallen.

Exempel 1:

Låt säga att du vill ha runda hörn på din side, dvs din meny, då lägger du denna kod:

-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;

-khtml-border-radius-topleft:20px;
-khtml-border-radius-topright:20px;
-khtml-border-radius-bottomleft:20px;
-khtml-border-radius-bottomright:20px;

-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;

under #side.

Exempel:

#side {

margin-top:-260px;

margin-left:-10px;

background: #ffffff;

width: 200px;

float: left;

padding:15px;

-webkit-border-top-left-radius:15px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius:15px;

-webkit-border-bottom-right-radius:15px;

-khtml-border-radius-topleft:15px;

-khtml-border-radius-topright:15px;

-khtml-border-radius-bottomleft:15px;

-khtml-border-radius-bottomright:15px;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

}

#side {

margin-top:-260px;

margin-left:-10px;

background: #ffffff;

width: 200px;

float: left;

padding:15px;

-webkit-border-top-left-radius:15px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius:15px;

-webkit-border-bottom-right-radius:15px;

-khtml-border-radius-topleft:15px;

-khtml-border-radius-topright:15px;

-khtml-border-radius-bottomleft:15px;

-khtml-border-radius-bottomright:15px;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

}

Koden måste läggas innan den lilla kråkan som ser ut såhär:
} Den måste alltså vara inne i stycket.

Ju högre siffra du har, desto mer rundade blir kanterna. I detta fallet är siffran 15px, vilket gör kanterna hyfsat runda, men man kan lika gärna välja 25 eller 30 om man vill det. Prova dig fram!

Exempel 2:

Vill man istället ha rundade hörn i content, dvs. där man skriver sina inlägg, då lägger man samma kod fast under #content. Content är oftast precis under #side.

Lätt va? =)

För att slippa sitta och läsa igenom heeela koderna så söker ni på exempelvis "side" genom att trycka Ctrl+F.

(Om ni ENDAST vill ha botten rundad, då raderar ni allt som har med top att göra (

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px; osv.)

. Och tvärtom om ni endast vill ha toppen rundad!)

Jag tycker om att ha mycket utrymme mellan koderna. Då hittar man lättare. Du kan ha hur mycket utrymme som helst, för det är ingenting som påverkar designen. Det får du genom att trycka enter.

4 kommentarer | Tips & Trix

Patricia

Längtar tills på torsdag =) Ska bli så kul att få se vad som kan hittas på med min blogg =) Du är riktigt duktig!

16/10 2010, kl. 21.42
URL: http://patriciaaxelsson.blogg.se/

Johan din man

Ctrl + F ... var det inte jag som lärde dig det? ;-D eller så var det Kling jag lärde det

16/10 2010, kl. 21.42
URL:

月姫 Tsukii ♥

sv: du byter ut en textlänken mot en bild istället =)

16/10 2010, kl. 21.42
URL: http://tsukii.se

S A N N A S . R U M

Det där med CTRL+F är verkligen hur bra som helst, jag tror jag ska lägga ut ett tips bara om det - för jag får så många frågor om "jag hittar det inte i stilmallen/kodmallen". Då kan jag bara - KOLLA HÄR :D eller så kan jag iofs bara skriva "tryck på ctrl+f och skriv in det..." Hmm.... Fast videos är alltid kul ;P

16/10 2010, kl. 21.42
URL: http://sannasrum.se