このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

いやぁ。もう、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用 */
}

あぁだ、こうだやって、
ボタンの実装もcssのみでやっちゃいましょう。