Compassでのグラデーション指定について。
IEについては7〜10まで確認済み。
よくある垂直・2色のグラデーションです。
style.scss
// SVG指定も出力するように(IE9用)
$experimental-support-for-svg: true;
// 色を登録しておくよ
$bottomColor: #3b5998;
$topColor: lighten($bottomColor, 10%);
// グラデーションを指定するよ
.button {
background: $bottomColor;
@include background-image(linear-gradient(top, $topColor, $bottomColor));
@include filter-gradient($topColor, $bottomColor, vertical);
}
出力されるCSSはこちら
style.css
.button {
background: #3b5998;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNzBiYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNiNTk5OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4c70ba), color-stop(100%, #3b5998));
background-image: -webkit-linear-gradient(top, #4c70ba, #3b5998);
background-image: -moz-linear-gradient(top, #4c70ba, #3b5998);
background-image: -o-linear-gradient(top, #4c70ba, #3b5998);
background-image: linear-gradient(top, #4c70ba, #3b5998);
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF4C70BA', endColorstr='#FF3B5998');
}