How to: Runda kanter i sin design.

Kategori >> Design - Tips
2010-08-28 @ 23:48:13


Fick en önskan från Isabell om en förklaring på hur man fixar runda kanter i sin bloggdesign! Och som den goda människa jag är ställer jag självklart upp :}

Det finns minst två olika varianter av detta, båda med för och nackdelar.
Den första är helt kodbaserad, relativt enkel men syns tyvärr inte i alla webbläsare, bl.a. inte i Internet explorer (som ingen borde ha för övrigt, men min arm sträcker sig tyvärr inte såpass långt att jag kan påverka varenda en).

Den andra är att man helt enkelt skapar bildfiler i photoshop som man med lite trix lägger in i sin design. En metod som är ganska tidskrävande och mycket krångligare men som fungerar i alla webbläsare. (Det är dock inte säkert att man kan få det att fungera ordentligt med sammanfogandet av bildfilerna i andra webbläsare än den man designar för).

Jag börjar kort och gott med den enklare varianten.

Oavsett vilken del av sin blogg som ska ha runda kanter är det följande kodsnutt man ska klistra in i sin Stilmall.


Där det nu står "15px" är det man ska ändra, det är dem som gäller i firefox.  Siffran bestämmer hur rund kanten blir. Ju högre tal desto mer rundning på kanten. Mellan 5 och 30 är bra skulle jag vilja påstå och det är bara att ändra på egen hand. Som ni ser står det även vilket hörn koden syftar på ("topleft", "bottomright" osv), vill man bara ha runda kanter på t.ex, bara översidan av något, sätter man 0px på "bottomleft" och "bottomright".

Var ska då denna kod placeras? Jo, det beror ju helt på vilken del eller vilken ruta i din blogg som ska ha runda hörn! Om vi kollar på min design har vi ju sidomenyn helt fristående och förutsatt att man inte har några komplicerade anordningar där räcker det att man sätter kodsnutten under #side i stillmallen, för att få runda kanter i sidomenyn. För att få det på delen där inläggen finns lägger man koden i #content.

Sen finns det ju lite andra anordningar, man kanske vill ha en bubbla runt varje inlägg eller göra en bubbla för varje del av sidomenyn osv, då måste man lägga till saker i själva kodmallen och hur man gör det i sidomenyn  har jag förklarat HÄR. Om man vill ha det så måste man bara se till att lägga runda-kanter-koden ihop med rätt sak i stilmallen, men det är lite mer komplicerat och om man inte är van vid att koda kan det vara lite krångligt.

I detta inlägg kommer jag inte gå igenom hur man gör runda kanter med hjälp av bildfiler, men det kommer säkert senare. Men ni vet väl att ni kan hitta det mesta på Designadinblogg.se!

Lycka till :)



bloglovin
Related Posts with Thumbnails
Postat av: Isabell

Först och främst: Tuuuussseeenn tack :D men tyvär så händer det ju ingenting när jag gör så..:( Jag har tillochmed ändrat till ett vanligt tema igen..men inget händer när jag lägger in koderna och ändrar på de där det står 15xp..:( Har du någon idé hur jag kan få det att funka? ;/ Tack i förskott

2010-08-29 @ 18:15:12
URL: http://isabell.bauer97@web.de
Postat av: Isabell

svar:tusen tack!! nu funkar det:) wohoo;)) jag skäms nästan lite att jag frågar dis så mycket...:/ men du kanske skulle kunna skriva ett inlägg om hur man får att menyn och headern står själva liksom..att det inte hänger ihop så där..;/ tack..;))

2010-08-29 @ 21:13:33
URL: http://isabell.bauer97@web.de
Postat av: Isabell

p.s. men det funkar inte där alla inlägg är..:((

2010-08-29 @ 21:14:48
URL: http://isabell.bauer97@web.de
Postat av: amanda

riktigt vacker :)

2010-08-29 @ 22:01:39
URL: http://amoriito.blogg.se/
Postat av: Mattias Persson

Tjabba!! ^_^ Roligt att du ger lite info om hur man designar!!! All cread ^_^



Det finns faktiskt en till lösning. Det är att man själv gör de runda kanterna med hjälp av i enklast fall <table> och låter den göra var linje och prick för sig. Visst det blir en hel del kod men funkar i alla webbläsare och är precis där man vill ha det ^_^



<over and /out>

2010-08-30 @ 01:21:27
URL: http://www.mlfoto.tk



Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Trackback
Visas bäst i: Mozilla Firefox
& designen har JAG gjort.
Intresserad av ny design?

Jag gör tyvärr inte beställningsdesigner just nu.
Välkommen tillbaka senare :)

bloglovin
RSS 2.0