CSS3 グラデーション (gradient)

2010年04月04日
blog
css

CSS3 を使ったグラデーション指定方法のメモ。

background-image: -moz-linear-gradient(
    top,
    rgb(200, 250, 150)   0%,
    rgb(180, 230, 130)  30%,
    rgb(160, 210, 110)  70%,
    rgb(140, 190,  90) 100%
);
background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.0, rgb(200, 250, 150)),
    color-stop(0.3, rgb(180, 230, 130)),
    color-stop(0.7, rgb(160, 210, 110)),
    color-stop(1.0, rgb(140, 190,  90))
);

CSS3 gradient Screenshot

参考：-moz-linear-gradient – MDC
　　　Safari Dev Center: Safari CSS Visual Effects Guide: Gradients
　　　CSS3 グラデーション（gradient）の指定方法 | CSS Lecture
　　　CSS3 「gradient」と「@font-face」
　　　CSS3 Gradient Generator

«
»