webForumDet fria alternativet

CSS3 i IE - Köra gradient, shadow och rounded corners på samma element...

4 svar · 1 741 visningar · startad av niNe

niNeMedlem sedan maj 2005138 inlägg
#1

Hejsan

Efter att ha kodat med glädje i Firefox, Chrome och Safari kom idag bakslaget med Internet Explorer (ovanligt?). IE8 hanterar ju inte CSS3 på samma sätt som alla normala webbläsare.

Om jag vill ha flera grafiska effekter på samma element så får jag problem. Kör jag bara gradient på en fyrkant så lirar det ju utan problem. Slänger jag dock på en skugga så försvinner gradient (boxen blir solidfärgad) och skuggan kommer fram. Kränger jag då också på en rounded corners (border-radius.htc) så försvinner gradient...

Så med nedanstående kod sitter jag nu med rundade hörn... Och solid färg... Dessutom hamnade skuggan på texten i boxen istället för på själva boxen... Men det är väl ett senare problem...

background: #ddf313; /* Non-CSS3 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDF313', endColorstr='#6A7A0A'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ddf313), to(#6a7a0a)); /* Webkit */
background: -moz-linear-gradient(top,  #ddf313,  #6a7a0a); /* FF 3.6+ */
behavior: url(css/border-radius.htc); /* IE */
border-radius:5px;
-moz-border-radius:5px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#797979', Direction=145, Strength=3);
-moz-box-shadow: 0px 0px 5px #797979;
-webkit-box-shadow: 0px 0px 5px #797979;
box-shadow: 0px 0px 5px #797979;

Den går ju uppifrån och ner i koden, så den går ju på den sista jag skriver, men hur får jag den att ta alla effekter i Internet Explorer? FF, Safari och Chrome är som sagt inga problem alls... Bara IE som krånglar :/

Någon som har några bra idéer? Eller ska jag bara hoppas på att världen ger upp Internet Explorer? :)

IcebreakerMedlem sedan juni 2000516 inlägg
#2

Har inte läst hela inlägget men detta kanske kan vara något:
http://css3pie.com/

niNeMedlem sedan maj 2005138 inlägg
#3

Mja, det kan nog lira... Inte helt sugen på att implementera ett javascript med massor av slaskkod enbart för att få bra funktionalitet i IE. Kanske lirar marginellt bättre i IE9, men 8an har ju typ inget stöd alls...

voigtann1Medlem sedan juni 20019 519 inlägg
#4

IE9 har ju stöd för det, och slaskkod vet jag inte riktigt, den kommer bara köras för IE<9 ändå. Men mitt råd är: Kör en design som ser OK ut även utan runda hörn/shadow, kom på altenativa lösningar för IE<9

niNeMedlem sedan maj 2005138 inlägg
#5

Mjo, den ser ju ok ut utan rundade hörn... Men det ser ju mer genomarbetat ut med lite effekter på; och nu när CSS3 ändå gör det såpass enkelt för en att göra rundade hörn/shadows/gradients/transparens med kod istället för resurs-/tidskrävande bilder vill man ju börja använda det...

När man får slänga på diverse javascripts och andra mer eller mindre "fulhacks" tkr jag nog att det får anses som slaskkod. Men visst... CSS3 kanske inte är en fullständig standard än...

Funkar ju bra med PIE, både i IE7 och 8... Kör man fortfarande 6an är man förpassad ut i mörkret och kylan... :)

255 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
129 ms — hämta forumlista (db)
122 ms — hämta statistik (db)
129 ms — hämta tråd, inlägg och bilagor (db)