css3模仿airplay播放器界面

今天给大家介绍个极小巧的绿色音乐播放器AirPlay,该播放器大小不到1M,界面华丽功能强大,无论在 XP 还是 Windows7 下都能显示华丽的半透明玻璃特效,另外还支持歌词、专辑图片下载,读取压缩文件等功能,可以说麻雀虽小,五脏俱全,是我见过的最好的音乐播放器!
我用这款播放器已经有一年多了,没有更新过,百看不厌。某天我同事说这个界面能做成网页形式也挺好的,乘空余时间,我用html5和css3模仿了它的界面。
这里用到了css3的圆角、背景渐变、阴影、动画等效果,仅兼容firefox 3.6+和chrome 10+。可以参考我以前的文章css3新增的五个属性
chrome10以下的渐变写法比较繁琐我就没写了,感兴趣话的可以参考下面给出的资料。

提示:你可以先修改部分代码再运行。

下面给出airplay官网地址,喜欢的话下载去吧:-P:http://www.podez.com/zion.php
新版地址:http://www.podez.com/index.html

参考资料:
背景渐变(CSS3 Gradient Backgrounds):http://css-tricks.com/examples/CSS3Gradient/
动画效果:http://www.w3schools.com/css3/css3_transitions.asp
CSS Border使用小分享:http://ued.taobao.com/blog/2010/08/04/css-border使用小分享/

css3新增的五个属性

css3出来已经有一段时间了,由于工作中经常要考虑使用IE的用户,一直没用上css3的属性。最近时间比较充裕,故参考了一些关于css3的资料,决定亲手练练。
下面简单描述一下css3的五个属性:
这是一个未用到任何css3属性的原始设计
1-原图

1.RGBA

浏览器支持: Apple Safari 4, Firefox 3.0.5, Google Chrome 1
RGBA 可以应用到所有与颜色相关的属性中. 例如: 文字颜色, 边框颜色, 背景颜色, 阴影颜色, 等等.

前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明).
代码中留有rgb或者十六进制的颜色值是提供给其他浏览器使用.

Continue reading →