itoigawaのブログ
2013-05-22
IE10のグラデーション
このサイトのボタンCSS3でグラデーションを表現してるがIEだけ出来ていなかった。
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d4d4d4)); /* Safari Chrome */ background: -webkit-linear-gradient(#f6f6f6, #d4d4d4); /* Chrome safari */ background-image: -moz-linear-gradient(top, #f6f6f6, #d4d4d4); /* Firefox */ background-image: -moz-gradient(top, #f6f6f6, #d4d4d4); /* Firefox */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#d4d4d4',GradientType=0 ); /* ie5.5 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#d4d4d4')"; /* ie8 */ background-image: -ms-linear-gradient(#f6f6f6, #e4e4e4, #d4d4d4); /* ie10 */ background: -o-linear-gradient(#f6f6f6, #d4d4d4); /* Opera */example
#example1 { /* fallback */ background-color: #063053; /* chrome 2+, safari 4+; multiple color stops */ background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99)); /* chrome 10+, safari 5.1+ */ background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99); /* firefox; multiple color stops */ background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99); /* ie 6+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873'); /* ie8 + */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')"; /* ie10 */ background-image: -ms-linear-gradient(#063053, #395873, #5c7c99); /* opera 11.1 */ background-image: -o-linear-gradient(#063053, #395873, #5c7c99); /* The "standard" */ background-image: linear-gradient(#063053, #395873, #5c7c99); }