有趣的WebKit css gradients

Chris Williams像我们推荐了CSS gradients。即使没有图片，CSS gradients也能创造出美观的效果。

他是如何使用CSS的？

.albumInfo {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));
        height: 8em;
        padding: 1em;
        border-top: 1px solid #858585;
        border-bottom: 1px solid #505050;
}

.albumInfo h1 {
        font-weight: bold;
        text-shadow: 0px -1px 1px black;
        font-size: 1.2em;
}
 
ul.tracks {
        background: -webkit-gradient(radial, 50% -70, 0, 50% 0, 200, from(#595959), to(#0d0d0d)) #0d0d0d;
        width: 25.7em;
}
 
ul.tracks li.odd {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,.05)));
}

效果：

点击查看示例：

Example 1. “Killer Queen”

Example 2.  CSS日历

点击查看详情：http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/