[代码收集]CSS3绘制逼真的ICO图标(google/orkut/delicious) - 笑忘书网页代码收藏馆

首页-代码 2013-11-22 09:57:07 -0500

★CSS3绘制逼真的ICO图标★

请勿抄袭本页面

代码说明

CSS3生成逼真的网页图标，一些常用网站的图标，在代码里找不到丝毫使用图片的痕迹，真心佩服作者的CSS3水平。转自源码爱好者

html代码

代码演示

html代码

#orkut div span{background: rgba(248,249,250,1);background : -webkit-gradient(linear, left top, left bottom, from(rgba(248,249,250,1)), to(rgba(206,221,246,1)));background : -moz-linear-gradient(top, rgba(248,249,250,1), rgba(206,221,246,1));position: absolute;box-shadow: 0 0 2px rgba(0,0,0,0.6);-moz-box-shadow: 0 0 2px rgba(0,0,0,0.6);-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.6);border: 0px solid #fff;width: 31px;height: 31px;border-radius: 31px;-moz-border-radius: 31px;top: 6px;left: 6px;}

.s64{width: 64px;height: 64px;border-width: 1px;line-height: 64px;text-shadow: 0 -1px 0 rgba(0,0,0,0.5);border-radius: 5px;-moz-border-radius: 5px;display:inline-block;}

</style>
<div id="orkut" class="orkut s64"><div><span> </span></div></div>

代码演示

html代码

#delicious .blue{width: 30px;height: 30px;position: absolute;top: 0;right: 0;background: #085ec5;background : -webkit-gradient(linear, left top, left bottom, from(rgba(0,96,206,1)), to(rgba(0,59,127,1)));background : -moz-linear-gradient(top, rgba(0,96,206,1), rgba(0,59,127,1));border: 1px solid rgba(0,96,206,1);border-top-right-radius: 4px;-moz-border-radius-topright: 4px;}

#delicious .black{width: 30px;height: 30px;position: absolute;bottom: 0;left: 0;background: #000;background : -webkit-gradient(linear, left top, left bottom, from(rgba(33,33,33,1)), to(rgba(0,0,0,1)));background : -moz-linear-gradient(top, rgba(33,33,33,1), rgba(0,0,0,1));border: 1px solid rgba(0,0,0,1);border-bottom-left-radius: 4px;-moz-border-radius-bottomleft: 4px;}

.s64{width: 64px;height: 64px;border-width: 1px;line-height: 64px;text-shadow: 0 -1px 0 rgba(0,0,0,0.5);border-radius: 5px;-moz-border-radius: 5px;display:inline-block;} 
</style>
<div id="delicious" class="s64 fl"><span class="blue"> </span><span class="black"> </span></div>

代码演示

[代码仅供参考，转载请注明出处]

----Comments(4)----
笑忘书 (@35230) | @ at 2013-11-27 00:09:
可能浏览器加载渲染也有压力…

墨隐 (@806287724) | @ at 2013-11-26 02:26:
看过一用css3画iphone的视频…… 代码老长了不知道加速多少倍才能拿来给人看

笑忘书 (@35230) | @ at 2013-11-22 18:31:
→_→可惜css3的兼容性还不算好

quan0 (@199785) | @ at 2013-11-22 11:10:
我也佩服他

Subscribe | Register | Login | N