用CSS3制作SNS网站图标-威言威语

用CSS3制作SNS网站图标

William2010-12-29 23:40设计14,303次阅读48条评论

扫一扫手机看

今天在网上搜寻各个网站的图标，于是就发现了这个，用CSS3绘制的网站的图标。这个算是比较初级的，一些圆角，阴影，渐变。不过正是因为不算很复杂，所以对于刚研究CSS3的童鞋来说还是很有帮助的，很多复杂的CSS3效果也是从简单的开始的。

于是我就记录了下来，大家一些学习下，有时间我写几个国内的SNS网站的图标出来玩玩，算是学习的收获。

Html代码比较简洁，当然，精华都在CSS里面。

原文地址：Pure CSS social media icons 完整的CSS：这里演示地址：

VIEW DEMO

用CSS3制作SNS网站图标

<ul>
   <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
   <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
</ul>

CSS，首先是整体CSS的定义

ul {
   list-style:none;
   padding:0;
   margin:0;
   overflow:hidden;
   font:0.875em/1 Arial, sans-serif;
}
ul li {
   float:left;
   width:66px;
   height:66px;
   margin:20px 20px 0 0;
}
ul li a {
   display:block;
   width:64px;
   height:64px;
   overflow:hidden;
   border:1px solid transparent;
   line-height:64px;
   text-decoration:none;
   /* css3 */
   text-shadow:0 -1px 0 rgba(0,0,0,0.5);
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px; /* standards version last */
}
ul li a:hover,
 ul li a:focus,
 ul li a:active {
   opacity:0.8;
   border-color:#000;
}

举例RSS图标的实现

.rss a {
   position:relative;
   width:60px;
   padding:0 2px;
   border-color:#ea6635;
   text-transform:lowercase;
   text-indent:-186px;
   font-size:64px;
   font-weight:bold;
   color:#fff;
   background:#e36443;
   /* css3 */
   -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
   -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
   box-shadow:0 0 4px rgba(0,0,0,0.4);
   background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
   background:-moz-linear-gradient(top, #f19242, #e36443);
   background:linear-gradient(top, #f19242, #e36443);
}
/* create circle */
.rss a:before {
   content:"\00a0";
   position:absolute;
   bottom:10px;
   left:10px;
   width:12px;
   height:12px;
   background:#fff;
   /* css3 */
   -moz-border-radius:12px;
   -webkit-border-radius:12px;
   border-radius:12px;
}
/* create the two arcs */
.rss a:after {
   content:"\00a0";
   position:absolute;
   bottom:10px;
   left:10px;
   width:22px;
   height:22px;
   border-style:double;
   border-width:24px 24px 0 0;
   border-color:#fff;
   /* css3 */
   -moz-border-radius:0 50px 0 0;
   -webkit-border-radius:0 50px 0 0;
   border-radius:0 50px 0 0;
}

其实这个并不是很复杂，画的这些图标用的基本都是类似的CSS，提供的只是一种思路，看自己从简单的东西发掘出什么。

本文固定链接: https://www.weisay.com/blog/plan-sns-icons-with-css3.html | 威言威语

用CSS3制作SNS网站图标：目前有 48 条评论

26楼
明月登楼：

呵呵，不错，这种图标都好漂亮呀！

2012-03-17 02:55 回复
25楼
jucelin：

cool!!

2011-04-05 15:28 回复
24楼
Paran：

给力

2011-03-06 19:49 回复
23楼
Miracle：

不错啊~~~

2011-01-01 11:40 回复
22楼
瘦手臂：

代码不少啊。。。

2010-12-31 21:34 回复
21楼
猪猪懒人窝：

最头疼的是兼容问题

2010-12-31 21:28 回复
- William博主：
  
  @猪猪懒人窝其实IE6麻烦点外，其他的兼容还是容易实现的
  
  2010-12-31 22:55 回复
20楼
七七：

嗯，不错的分享，祝元旦快乐！

2010-12-31 17:50 回复
- William博主：
  
  @七七呵呵，同乐~
  
  2010-12-31 22:52 回复
19楼
娟兒：

预祝博主元旦快乐

2010-12-31 16:36 回复
- William博主：
  
  @娟兒呵呵，你也快乐~
  
  2010-12-31 22:49 回复
18楼
C瓜哥：

就是我之前用的那个

2010-12-31 13:15 回复
- William博主：
  
  @C瓜哥是么，呵呵
  
  2010-12-31 22:49 回复
17楼
song：

两天没有过来了，在折腾我自己的单栏的PJ呢，想在2011之前搞完，很多次想给你发个邮件问些问题，但都坚持下来了，还是想要能解决的自己全解决，这次的样子是我一直想要的，想了很久，原来是想等看别人的样式看透了再开始，但总觉得自己步子迈的不够大，终于狠了一下心，开工了……
对于CSS，真的所知太少了，所以总喜欢呆在你这里，感染一些灵气吧……
新年快乐！！！！！嗨呸牛耶~~~~

2010-12-31 13:01 回复
- William博主：
  
  @song呵呵，想当初我也是时时刻刻的研究PJBlog的。
  话说自己动手学的更多。
  
  2010-12-31 22:48 回复
16楼
优趣：

哇哦、牛，CSS3 强大啊！

2010-12-31 12:51 回复
- William博主：
  
  @优趣恩，CSS3是比较强大，配合HTML5就更棒了
  
  2010-12-31 22:39 回复
15楼
雅岚：

魔女来也。。。
图片圆角貌似IE下不支持。。。一如我的魔板头图。。

2010-12-31 12:18 回复
- William博主：
  
  @雅岚IE9以下的都不支持CSS3，可惜啊~
  
  2010-12-31 22:58 回复
14楼
david：

这个不错哦，蛮漂亮的图片，我一会也去试试。

2010-12-31 03:33 回复
- William博主：
  
  @david哈哈，是的，国外的Logo相对国内的要简洁。
  
  2010-12-31 11:02 回复
  - david：
    
    @William是啊。嘿嘿，新年快乐哦。
    
    2011-01-05 04:33 回复
13楼
skidu：

老兄爆猛料了？先偷下去研究研究……嘿嘿……

2010-12-30 21:11 回复
- William博主：
  
  @skidu我也是无意发现的，觉得挺实用的，就发上来额。
  
  2010-12-30 23:43 回复
12楼
xmwusx.cn：

css最最烦人，个个浏览器都不一样有时要要被他高峰了！
为神马看别人网页的风格都很漂亮看自己的就觉得不三不四

2010-12-30 20:33 回复
- William博主：
  
  @xmwusx.cn兼容一直是个比较麻烦的问题，当然，高质量的CSS在兼容方面是很棒的。不用一个Hack去兼容所有浏览器。
  
  2010-12-30 23:42 回复
11楼
爱惜：

对于CSS，我懂得几个简单的属性。这些我还看不懂。

2010-12-30 19:44 回复
- William博主：
  
  @爱惜先从CSS开始，CSS3等熟悉了CSS就上手快了
  
  2010-12-30 23:41 回复
10楼
浩子窝窝：

CSS3原来这么强大哟。。学习了。

2010-12-30 18:47 回复
- William博主：
  
  @浩子窝窝哈哈，你应该经常写CSS吧
  
  2010-12-30 23:40 回复
9楼
逝魂：

我也不怎么会~ 学习了

2010-12-30 15:41 回复
- William博主：
  
  @逝魂呵呵，不会吧，我以为你会很懂的
  
  2010-12-30 23:40 回复
8楼
远走高飞：

css原来这么强大的~~

2010-12-30 14:23 回复
- William博主：
  
  @远走高飞是的，很强大
  
  2010-12-30 23:39 回复
7楼
宿迁学院论坛：

额css我还是不行……

2010-12-30 13:11 回复
- William博主：
  
  @宿迁学院论坛其他行就OK了
  
  2010-12-30 23:39 回复
6楼
龙城瓶子：

CSS啊，不想搞
没那水平也没那时间。。。

2010-12-30 12:45 回复
- William博主：
  
  @龙城瓶子其实CSS是所有代码中最容易上手的了。
  
  2010-12-30 23:38 回复
5楼
纯野：

呃，看到这些东西真让人头痛。

2010-12-30 12:25 回复
- William博主：
  
  @纯野额，怎么会头痛呢，欣赏就可以了
  
  2010-12-30 23:38 回复
4楼
Prouz：

不错，学习一下！

2010-12-30 11:23 回复
- William博主：
  
  @Prouz恩，的确值得学习的
  
  2010-12-30 23:44 回复
地板
gooder8：

CSS是月来月强大了

2010-12-30 09:33 回复
- William博主：
  
  @gooder8一直都很强大，就是浏览器不给力啊
  
  2010-12-30 23:37 回复
板凳
蛋糕：

学习一下！

2010-12-30 02:57 回复
- William博主：
  
  @蛋糕很有必要~
  
  2010-12-30 23:37 回复
沙发
wmtimes：

嗯。都相当不错啊。

2010-12-30 00:24 回复
- William博主：
  
  @wmtimes恩，很适合初学者。
  
  2010-12-30 23:36 回复

发表评论

26楼

明月登楼：

呵呵，不错，这种图标都好漂亮呀！

2012-03-17 02:55 回复

25楼

jucelin：

cool!!

2011-04-05 15:28 回复

24楼

Paran：

给力

2011-03-06 19:49 回复

23楼

Miracle：

不错啊~~~

2011-01-01 11:40 回复

22楼

瘦手臂：

代码不少啊。。。

2010-12-31 21:34 回复

21楼

猪猪懒人窝：

最头疼的是兼容问题

2010-12-31 21:28 回复

William博主：

@猪猪懒人窝其实IE6麻烦点外，其他的兼容还是容易实现的

2010-12-31 22:55 回复

20楼

七七：

嗯，不错的分享，祝元旦快乐！

2010-12-31 17:50 回复

William博主：

@七七呵呵，同乐~

2010-12-31 22:52 回复

19楼

娟兒：

预祝博主元旦快乐

2010-12-31 16:36 回复

William博主：

@娟兒呵呵，你也快乐~

2010-12-31 22:49 回复

18楼

C瓜哥：

就是我之前用的那个

2010-12-31 13:15 回复

William博主：

@C瓜哥是么，呵呵

2010-12-31 22:49 回复

17楼

song：

两天没有过来了，在折腾我自己的单栏的PJ呢，想在2011之前搞完，很多次想给你发个邮件问些问题，但都坚持下来了，还是想要能解决的自己全解决，这次的样子是我一直想要的，想了很久，原来是想等看别人的样式看透了再开始，但总觉得自己步子迈的不够大，终于狠了一下心，开工了……
对于CSS，真的所知太少了，所以总喜欢呆在你这里，感染一些灵气吧……
新年快乐！！！！！嗨呸牛耶~~~~

2010-12-31 13:01 回复