webForumDet fria alternativet

Apple.se , rundade hörn-teknik?

HTML & CSS

8 svar · 2 734 visningar · startad av Anton_L

Medlem sedan mars 200584 inlägg
Frågan#1

Satt och spanade lite på Apples hemsida hur de rundat hörnen, trodde såklart att bilderna var gjorda med runda hörn i Photoshop... Sparade en bild och öppnaden den. Fyrkantiga hörn :o. Hur lyckas dom få hörnen att bli rundade i webbläsaren, måste ju vara någon form av CSS som lägger på runda hörn på bilderna?

Länk: http://www.apple.com/se/ipod/
Kolla på bilden med de fyra färgade tummavtycken i något bildprogram...

Anton

Medlem sedan aug. 20039 340 inlägg
#2

Använd border-radius.

-moz-border-radius: 7px;
border-radius: 7px;

Kan även tipsa om denna sida: http://css3generator.com/

Medlem sedan dec. 20051 056 inlägg
#3

Antagligen off topic men om du skriva iphone eller ipad applikationer utan att checka in i koden i apples appstore så rekommenderar jag följande bok:

Boken nedan tar också upp runda hörn och övrigt som har med iphone gui:t att göra.

Building iPhone Apps with HTML, CSS, and JavaScript
http://ofps.oreilly.com/titles/9780596805784/

Sen har du http://jqtouch.com/ som är en jQuery plugin som löser mycket av funktionaliteten.

Jag har provat och det går att fejka det så det ser mycket likt en riktig app (lokalt installerad).

Medlem sedan mars 200584 inlägg
#4

nitro2k01 skrev:

Använd border-radius.

-moz-border-radius: 7px;
border-radius: 7px;

Kan även tipsa om denna sida: http://css3generator.com/

CSS 3/HTML5 har alldeles för få användare stöd för, vill inte göra det så bara vissa användare kan se resultatet. Stensäkert ska det vara :bire

Medlem sedan okt. 2007446 inlägg
#5

Det enda som är stensäkert är nog att använda bilder i såfall
Eller så ser man till att sidan ser hyfsad ut även utan de där rundade hörnen för de stackare som sitter med IE ;)

De flesta moderna browsers stödjer ju border-radius i någon form.

Det är väl rätt troligt att nästa version av Firefox kommer stödja det med, dvs de dumpar -moz prefixet. ( det finns tydligen kvar i senaste betan för ff 4)
IE 9 Kommer stödja border-radius som det ser ut nu.

Medlem sedan sep. 201041 inlägg
#6

Är det någon jag saknar/Vilka finns det?

	\-webkit-border-radius:8px;
	\-moz-border-radius: 8px;
	border-radius: 8px;

Är förresten -o- en?

Medlem sedan jan. 201133 inlägg
#7

http://css3pie.com/ gör så att border-radius mm funkar i IE
inte 100% men ganska bra

Medlem sedan dec. 20051 056 inlägg
#8

Css3pie var ju väldigt användbart. Bra länk !

Medlem sedan jan. 201133 inlägg
#9

Japp den e grym :)

264 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
129 ms — deklarationer (db)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)
128 ms — ändringar (db)