CSS3 生成ICO图标，很逼真

时间：2013-11-19 16:20 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3制作的社交媒体网站logo图标</title>
<style>
body{font-family: Arial;font-size: 14px;color: #262626;margin: 20px;padding: 0;background: #efefef;}
.wrapper{width: 960px;margin: 0 auto;}
h1, h3{text-shadow: 0 1px 0 #fff;}
.fl{float: left;margin-right: 20px;}
h3{clear: both;padding-top: 20px;}
.netvibes{background: rgba(104,219,33,1);background : -webkit-gradient(linear, left top, left bottom, from(rgba(104,219,33,1)), to(rgba(19,130,16,1)));background : -moz-linear-gradient(top, rgba(104,219,33,1), rgba(19,130,16,1));color: #fff;text-align: center;border-color: #0c5f0c;border-style: solid;font-weight: bold;font-size: 178px;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);}
#netvibes .s64 span{font-size: 88px;}
#netvibes .s32 span{font-size: 42px;}
.linkedin{background: rgba(91,171,203,1);background : -webkit-gradient(linear, left top, left bottom, from(rgba(91,171,203,1)), to(rgba(12,101,150,1)));background : -moz-linear-gradient(top, rgba(91,171,203,1), rgba(12,101,150,1));color: #fff;text-align: center;border-color: #074b6f;border-style: solid;font-weight: bold;font-size: 108px;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);}
#linkedin .s64 span{font-size: 55px;}
#linkedin .s32 span{font-size: 26px;}
#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;}
#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;}
#flickr{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;font-weight: bold;font-size: 108px;position: relative;border: 0px solid rgba(0,0,0,1);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);}
#flickr .blue{width: 20px;height: 20px;position: absolute;top: 22px;left: 8px;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 #003c84;border-radius: 20px;-moz-border-radius: 20px;}
#flickr .pink{width: 20px;height: 20px;position: absolute;top: 22px;left: 34px;background: rgba(253,30,147,1);background : -webkit-gradient(linear, left top, left bottom, from(rgba(253,30,147,1)), to(rgba(203,2,108,1)));background : -moz-linear-gradient(top, rgba(253,30,147,1), rgba(203,2,108,1));border: 1px solid #ba0060;border-radius: 20px;-moz-border-radius: 20px;}
#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);}
.s128{width: 128px;height: 128px;border-width: 3px;line-height: 128px;text-shadow: 0 -2px 0 rgba(0,0,0,0.5);border-radius: 10px;-moz-border-radius: 10px;}
.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;}
.s32{width: 32px;height: 32px;border-width: 1px;line-height: 32px;text-shadow: 0 -1px 0 rgba(0,0,0,0.5);border-radius: 3px;-moz-border-radius: 3px;}
</style>
</head>
<body>
    <div class="wrapper">
		<h1>CSS3 Experiment by insicdesigns</h1>
		<p>Fun with CSS3- Social media icons created in pure CSS.</p>
        <h3>NetVibes</h3>
        <div id="netvibes">
            <div class="netvibes s128 fl">
                <span>+</span>
            </div>
            <div class="netvibes s64 fl">
                <span>+</span>
            </div>
            <div class="netvibes s32 fl">
                <span>+</span>
            </div>
        </div>
        <h3>Linkedin</h3>
        <div id="linkedin">
            <div class="linkedin s128 fl">
                <span>in</span>
            </div>
            <div class="linkedin s64 fl">
                <span>in</span>
            </div>
            <div class="linkedin s32 fl">
                <span>in</span>
            </div>
        </div>
        <h3>More</h3>
            <div id="orkut" class="orkut s64 fl">
                <div><span> </span></div>
            </div>
			<div id="delicious" class="s64 fl">
                <span class="blue"> </span>
				<span class="black"> </span></div>
			<div id="flickr" class="s64 fl">
                <span class="blue"> </span>
				<span class="pink"> </span></div>
			<div id="google" class="s64 fl">
                <span>g</span> </div>
    </div>
</body>
</html>

CSS3 生成ICO图标，很逼真

网页特效