Det här med runda hörn

Hejsan.

Jag gillar sidor som har runda hörn och skulle själv vilja bygga upp en sida som använder sig av runda hörn men jag får aldrig till det.

Hur gör man egentligen runda hörn på det bästa sättet?

Jag hittade detta på en sida.

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

Det blev väldigt bra men det fungerar ju tyvärr inte i Internet Explorer.

Skall man behöva göra bilder i tex Photoshop? Eller finns det någon annat smart sätt för att göra snygga hörn som fungerar både i firefox och i IE.

Om det är bilder som gäller är det någon som kan tipsa on en bra guide där dom tar upp hur man gör snygga hörn i photoshop?

Någon får andra kategori om det blev fel.

-moz delarna är idag CSS3.0 specifikta lösningar och tyvärr fungera det inte som du beskriver i IE.

På din fråga med bästa tips/lösningen för runda hörn har jag en mot fråga:

Är det med bestämd bredd eller kommer/skall dom variera, finns lösningar med positon relative,absolut för att få det dynamiskt men enklast lösningen är att ha en top-wrapper med runda hörn, dock bestämd bredd.

en snabb tutorial i photoshop (som har runda hörn inbyggt): http://www.tutorio.com/tutorial/pho...p-round-corners

skall se om jag kan få upp ett expriment jag gjort "back in the days" så du kan se hur jag löste det, utan tabeller ;)

Hej!

Det du skrev är css koder, de funkar i mozilla, inte Explorer. Dock tror jag att jag har sett liknande koder för Internet Explorer.

Vill du göra snygga hörn i Photshop? Då ska du följa denna listan:

1. Öppna photshop

2. Ta ett nytt dokument

3. Ta rektangel verktyget ( Rounded Rektangel Tool ) - Sen så ser du där uppe, under View Filter Help o det, att det står Radius:

4. I radius ska du fylla i antalet pixlar, jag brukar köra med 2 för att få snygga hörnar , du kan köra med vilken siffra du vill, annars kör jag på 5px ibland.

5. Lycka till =)

Finns grymma jQuery-plugin.

Jag har testat det men jag gillade inte dom. jQuery gör ju hur många divar som helst så källkoden blir inte så snygg. Men det är ju inte viktigt egentligen men jag vill inte använda mig av jQuery.

Voigitan jag kör med fast bredd.

1. Vad spelar det för roll om jquery lägger in en massa divar, det syns aldrig av google eller ta någon extra resurs av data, det skriptas ut ändå.

2. följd fråga, hur är de runda hörnen? skall dom vara en färgade, eller ramar / skuggor osv?

Om man skall vara lite elak, så hade jag kört med -moz delen, om folk väljer IE för att besöka ens hemsida så får man leva med att se en sämmre version av sidan :P

annars:

<div class="container">
      <div class="top-corners"></div>
      <div class="content"></div>
      <div class="bottom-corners"></div>
</div>

Gjorde en guide lite snabbt:

http://cerity.se/guides/roundedcorners/

:)

Webdesignskolan.com har även en guide om hur man gör det i css.

http://webdesignskolan.com/css-effe...d_corners_1.htm

Högerklicka --> visa källkod för att se den koden som gör dessa runda hörn.

Man kan lösa det på tre sätt vad jag ser just nu:

1. kör med moz-/webkit- för de läsare som ha runda hörn snurrande, och ignorera de läsare som inte har stöd för dessa

2. Använd javascript/jquery för att rendera ut en "OK" lösning för samtliga läsare, nackdelar = du behöver jQuery (dock använder man jquery till mycket annat också i de flesta projekt just nu),  och om man har javascript avaktiverat så bryts konstigt/kan brytas konstigt då man inte få några runda hörn alls.

3. topp/botten div med bakgrunden, 1-2 extra http anrop för att hämta bilden, dock så cachas det så det laddar man bara en gång per besök.

Eller en hybrid av att blanda 1-2 av punkterna ovan

Många bra tips, jag och Voigtan snackade om detta via skype innan idag. Men tack för en bra guide Wimpey, jag ska kolla den lite mer noga imorgon så låt den gärna vara kvar ett par dagar.

Inga problem, jag låter den vara kvar :)

I de flesta fallen är rundade hörn ingenting som krävs för att designen ska fungera och då kör man med -webkit-border-radius och -moz-border-radius. Det är det som är så fint med CSS (om man kan det): bara för att något inte fungerar går inte allt sönder.

Vid större rundade hörn (exempelvis "piller"-knapparna jag gjort på w3sidan) använder jag bakgrundsbilder.

Så gör jag iaf.