CSS3绘制逼真的ICO图标

2013-08-18 01:25:47 -0400

此代码仅供参考

代码说明

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>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N