CSS3绘制逼真的ICO图标

代码说明

CSS3生成逼真的网页图标，一些常用网站的图标，在代码里找不到丝毫使用图片的痕迹。转自笑忘书网盘

HTML代码

<style> #google{font-family: Georgia, "Times New Roman", Times, serif;background: rgba(70,120,231,1);background : -webkit-gradient(linear, left top, left bottom, from(rgba(70,120,231,1)), to(rgba(36,61,127,1)));background : -moz-linear-gradient(top, rgba(70,120,231,1), rgba(36,61,127,1));color: #fff;text-align: center;border: 0px solid #072266;font-weight: bold;font-size: 55px;line-height: 45px;position: relative;box-shadow: 0 0 4px rgba(0,0,0,0.4);-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);} .google{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="google" class="google"><span>g</span></div>

代码演示

HTML代码

<style> #orkut{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));color: #b62b91;text-align: center;border-color: #b4c4dd;border-style: solid;font-weight: normal;font-size: 108px;position: relative;box-shadow: 0 0 4px rgba(0,0,0,0.4);-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);} #orkut div{background: rgba(215,121,192,1);background : -webkit-gradient(linear, left top, left bottom, from(rgba(215,121,192,1)), to(rgba(182,43,145,1)));background : -moz-linear-gradient(top, rgba(215,121,192,1), rgba(182,43,145,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);width: 44px;height: 44px;border: 1px solid rgba(0,0,0,0.2);border-radius: 84px;-moz-border-radius: 84px;top: 9px;left: 9px;} #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代码

<style> #delicious{background: rgba(255,255,255,1);background : -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(209,209,209,1)));background : -moz-linear-gradient(top, rgba(255,255,255,1), rgba(209,209,209,1));color: #fff;text-align: center;border: 0px solid rgba(0,0,0,1);font-weight: bold;font-size: 108px;position: relative;box-shadow: 0 0 4px rgba(0,0,0,0.4);-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);} #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>

代码演示