Jag berättade för någon dag sedan att det går att göra rundade hörn i webdesign utan att använda bilder till det. Jag är inte fullt säker på vilka webbläsare som visar det här men i flesta fall så brukar det bara vara Internet Explorer som stretar emot de andra läsarna.
» Här kommer koden du ska använda – kopiera allt:
» Hur går ska man gå till väga?
Denna kod ska kopieras in i stilmallen under det avsnittet du vill ha rundade hörn. Om du t ex vill att inläggstexten ska vara rundad lägger du in kodavsnittet under ”entrybody”. Så här skulle det se ut i stilmallen:
.entrybody {
font-family: arial;
font-size: 12px;
font-weight: normal;
color: #333333;
line-: 140%;
margin: 2px;
background-color: #cccccc;
padding: 5px;
border: 1px solid #FFFFFF;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}
» Då skulle inläggstexten kunna se ut såhär:
» Denna är alltså 5 px rundad i varje hörn. För att ändra px storleken kan jag förklara vad som menas med varje kodavsnitt:
-webkit-border-top-left-radius:5px; <– antal px i övre vänstra hörnet
-webkit-border-top-right-radius:5px; <– antal px i övre högra hörnet
-webkit-border-bottom-left-radius:5px; <– antal px i undre vänstra hörnet
-webkit-border-bottom-right-radius:5px; <– antal px i under högra hörnet
-khtml-border-radius-topleft:5px; <– antal px i övre vänstra hörnet
-khtml-border-radius-topright:5px; <– antal px i övre högra hörnet
-khtml-border-radius-bottomleft:5px; <– antal px i undre vänstra hörnet
-khtml-border-radius-bottomright:5px; <– antal px i under högra hörnet
-moz-border-radius-topleft:5px; <– antal px i övre vänstra hörnet
-moz-border-radius-topright:5px; <– antal px i övre högra hörnet
-moz-border-radius-bottomleft:5px; <– antal px i undre vänstra hörnet
-moz-border-radius-bottomright:5px; <– antal px i under högra hörnet
» Man ser väldigt enkelt vad som är vad (top left – övre vänstra hörnet) och de tre styckena är alltså ”likadana”. Man kan även välja om man t ex bara vill ha rundade hörn i högra och vänstra övre hörnen osv. Jag har bl a 5 px i högra och vänstra nedre delen av ”content” d v s såhär:
Vill du ha hjälp med att positionera de rundade hörnen? D v s vart i stilmallen du ska lägga in detta för att hörnen ska visas på rätt ställe.
Kontakta mig då via kontaktformuläret eller skicka en kommentar här :)
Uppdatering: Om du tar bort kthml-avsnittet ska det även fungera i Internet Explorer (jag har inte testat själv utan det är en annan som har uppmanat mig om det)!
29 svar till Designtips: Rundade hörn – utan bilder
Mli 03/06/09
Tack så JÄTTEMYCKET för det här inlägget. Har funderat på det här hur länge som helst och det funkade ju jättebra! Tack och åter tack!
[Svara]
Molly 18/07/09
superbra!!!! :D tack, det är verkligen behövligt! :love:
[Svara]
Sofia 24/08/09
Detta har jag också letat efter :D Tack!
[Svara]
Nerry. 31/12/09
Men det funkar fortfarande inte i Internet Explorer även om man har tagit bort det avsnittet.
Svar från Tescho: Okej. Det var bara en annan tjej som uppmanade om att det ska fungera då.
[Svara]
Rebecca Kleist 10/01/10
Det funkar inte för mig? ;s kan inte ens göra mellanrum mellan inlägg + sidmenyn.. ;S
ps har mac.. svara till min mail
Svar från Tescho: Vad använder du för webbläsare? Jag har tyvärr inte tid att svara via mail.
[Svara]
Maria 19/01/10
Hejsan här kommer jag och stör igen :D
Jag tänkte bara fråga dig en sak. Jag hittar inte riktigt vart det är jag ska lägga in den här mallen om jag ska runda hörnen på kommentarsrutan. Om du besöker min blogg och klickar på kommentarer förstår du nog vad jag menar. Och så vill jag också runda kanterna på rutan som dyker upp när det står tillbaka till startsidan.
Det kanske var en del, men skulle bli så glad om jag fick hjälp med det :D
Svar från Tescho: För att få rundade hörn med hjälp av den koden vid tillbaka till startsidan kan du lägga in det under nav ul. Det påverkar dock resterande av sidomenyn. Ang kommentarboxen så ska du lägga det under commentform. Lycka till!
[Svara]
Maria 29/01/10
Tack så mycket! :D
[Svara]
FELICIA 10/02/10
Hej! på startsidan på min blogg så synns inte inläggen. Det är bara bakgrunden man ser. Men om man trycker på tex en av kategorierna så är inläggen där. Vad kan ha blivit fel och vad ska jag göra för att inläggen ska synnas i startsidan på bloggen.
Svar från Tescho: Jag hittar inge fel med inläggen så jag antar att du har åtgärdat problemet. Jag ser nämligen dem på framsidan..
[Svara]
Jenny 10/03/10
Hej!
Jag undrar hur man får rundade boxar? tex en för arkiv, en för kategorier och såvidare :}
Kram
Svar från Tescho: Svaret på frågan finner du här: [ länk ]
[Svara]
Sofie 11/03/10
Hejsan! Först: Tusen tack för allt, det här med att du svarar på alla frågor och så. Du hjälper verkligen! Tummarna upp för dig ^^
Har två frågor…
1. Hur flyttar man bort side från content? I Fashion t.ex så sitter side och content liksom ihop.
Så, kortfattat: Kan man flytta side? Gör man det med padding?
2. Hur får man smiliserna ovanför kommentarsrutan som du har?
Tack för svar! :)
Svar från Tescho: Tack själv!
1, Svaret är redan publicerat här: http://tescho.se/flytta-ut-sidomenyn-separera-inlagg-sidomeny/
2, Svaret är redan publicerat här: http://tescho.se/fraga-smilies-i-bloggen/
[Svara]
hanna 04/04/10
tack du är en ängel!!! har letat efter detta i flera år känns det som.
skitsnygg blogg har du också.
kramkramkram :D
[Svara]
Cecilia 03/06/10
Hej!
Vart skall man lägga till ”koden” om man vill att den yttersta rutan(den som en del har problem med, den som ibland blir vit)som är runt om headern? Och lika så när det gäller ”info” rutan, som jag har till höger?
:)
Svar från Tescho: Jag förstår inte riktigt vad du menar men jag antar att du pratar om wrappern? Ta bort färgkoden på den om det är vitt där.
[Svara]
Alice 12/07/10
Hej!
Har blogg.se och jag hittar inte det avsnittet i min stilmall. Det finns tre olika entryboddy och ingen fungerar när jag kopierar in koderna.
[Svara]
Tescho svarar:
18 / 04 - 09 » 23:19:09
Det ska bara finnas en ”entrybody”.
[Svara]
Bea 10/11/10
Hej! Underbar blogg måste jag säga!
En liten fråga bara; min blogg blir helt rörig när jag lägger in koderna. Jag vill ha själva inläggen rundade som http://www.candis.se har, och har försökt på jätte många sätt men ingenting funkar. ;( Någon aning om varför?
Gråter blod snart haha!
Take care!
[Svara]
Tescho svarar:
18 / 04 - 09 » 23:19:09
Jag har skrivit någon guide om det vet jag :) Hädanefter vill jag at du respekterar att jag inte besvarar bloggdesignfrågor. Det finns diverse guider här: http://tescho.se/webdesign/fragor/
[Svara]
Kateie 11/03/11
hej, jag undrar hur man gör rundade hörn på alla bilder man lägger upp? jag använder blogg.se . kollade på fokis.se och hon har det på alla bilder…. har googlat lite men jag hittar inte hur man kan göra det… pls help me <3 Pusss
[Svara]
Tescho svarar:
18 / 04 - 09 » 23:19:09
Kolla med Google, h*n vet :)
[Svara]
Marit Rönnestad 17/06/11
Tack så jättemycket för tipset! Du är bäst!
[Svara]
Matilda 18/06/11
Tusen tack för detta inlägget! Som jag har letat efter hur man gör detta! :)
[Svara]
Linn Bank ♥ 16/08/11
tack så jätte mycket för detta tips! :D
[Svara]
Veronica 30/08/11
Åh, tack så otroligt mycket! Detta gjorde verkligen min ”dag”.
Nu kan jag äntligen fortsätta med det andra jobbet.
[Svara]
Vendela 04/09/11
Tack SÅ JÄTTE MCKET!
Du är räddaren i nöden! <3
[Svara]
Kaleido 14/11/11
Du är en av de väldigt få bloggar som går rakt på sak och bara säger som det är med kodning och design, du gör det enkelt och du är en dröm för lata kodare!!
Tio stjärnor till dig!
[Svara]
XTIO 26/11/11
måste tacka dig för en underbar blogg. :P har du ngt sammarbete med ngn?
[Svara]
Tescho svarar:
18 / 04 - 09 » 23:19:09
Tack själv! Om du menar samarbete kring olika guider så är svaret nej. Eller vad tänkte du på?
[Svara]
ida [foto] 03/01/12
tack så jättemycket! :D
[Svara]
emmie 30/04/12
TACK, TACK, TACK, TACK, TACK, TACK, TAAAACK SÅ MYCKET!!!
[Svara]