internet explorer - CSS3 Gradients in IE -
i have gradient:
background: #ffa13e; /* fallback */ background: -webkit-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%); background: -moz-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%); background: -o-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%); background: linear-gradient(315deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
can ie filter support type of gradient? if so, how implement works in ie 8 9? 7 not possible?
there awesome tool generate perfect gradient ie support too. use http://www.colorzilla.com/gradient-editor/
here demo color combination works in ie
div{ width:300px; height:400px; background: #ff7805; /* old browsers */ /* ie9 svg, needs conditional override of 'filter' 'none' */ background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigd2lkdgg9ijewmcuiighlawdodd0imtawjsigdmlld0jved0imcawidegmsigchjlc2vydmvbc3bly3rsyxrpbz0ibm9uzsi+ciagpgxpbmvhckdyywrpzw50iglkpsjncmfklxvjz2ctz2vuzxjhdgvkiibncmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogicagphn0b3agb2zmc2v0psixjsigc3rvcc1jb2xvcj0ii2zmnzgwnsigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzmzzzxq9ijewmcuiihn0b3aty29sb3i9iinmzmexm2uiihn0b3atb3bhy2l0et0imsivpgogidwvbgluzwfyr3jhzgllbnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2vuzxjhdgvkksiglz4kpc9zdmc+); background: -moz-linear-gradient(top, #ff7805 1%, #ffa13e 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ff7805), color-stop(100%,#ffa13e)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, #ff7805 1%,#ffa13e 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, #ff7805 1%,#ffa13e 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top, #ff7805 1%,#ffa13e 100%); /* ie10+ */ background: linear-gradient(to bottom, #ff7805 1%,#ffa13e 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ff7805', endcolorstr='#ffa13e',gradienttype=0 ); /* ie6-8 */ }
another option use css pie. can find detailed explanation pie in link
Comments
Post a Comment