CSS3 グラデーション(gradient)の指定方法
2010.12.29
この記事は最終更新日から1年以上が経過しています。
いやぁ。もう、css3で記述されているサイトも沢山増えてきましたね。
今回は改めて、css3のグラデーションを振り返ってみましょう。
.gradient { background: -moz-linear-gradient(top, #fff, #000);/* Firefox用 */ background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#000));/* Safari,Google Chrome用 */ }
また、途中で色を変更することも可能です。
.gradient02 { background: -moz-linear-gradient(left top, #fff, #f00 30%, #f90 50%, #093 70%, #000); /* Firefox用 */ background: -webkit-gradient(linear,left top,right bottom,from(#fff), color-stop(0.3, #f00), color-stop(0.5, #f90), color-stop(0.7, #093), to(#000)); /* Safari,Google Chrome用 */ }