当前位置: 首页 > 设计 > 正文
avatar

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

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

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

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

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

<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,提供的只是一种思路,看自己从简单的东西发掘出什么。

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

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

  1. avatar
    26楼
    明月登楼 Mozilla Firefox Windows

    呵呵,不错,这种图标都好漂亮呀!

    2012-03-17 02:55 [回复]
  2. avatar
    25楼
    jucelin Google Chrome Windows

    cool!!

    2011-04-05 15:28 [回复]
  3. avatar
    24楼
    Paran Internet Explorer Windows

    给力

    2011-03-06 19:49 [回复]
  4. avatar
    23楼
    Miracle 搜狗浏览器 Windows

    不错啊~~~

    2011-01-01 11:40 [回复]
  5. avatar
    22楼
    瘦手臂 Google Chrome Windows

    代码不少啊。。。

    2010-12-31 21:34 [回复]
  6. avatar
    21楼
    猪猪懒人窝 Internet Explorer Windows

    最头疼的是兼容问题

    2010-12-31 21:28 [回复]
    • avatar
      William Internet Explorer Windows

      其实IE6麻烦点外,其他的兼容还是容易实现的

      2010-12-31 22:55 [回复]
  7. avatar
    20楼
    七七 Internet Explorer Windows

    嗯,不错的分享,祝元旦快乐!

    2010-12-31 17:50 [回复]
    • avatar
      William Internet Explorer Windows

      呵呵,同乐~

      2010-12-31 22:52 [回复]
  8. avatar
    19楼
    娟兒 360安全浏览器 Windows

    预祝博主元旦快乐

    2010-12-31 16:36 [回复]
    • avatar
      William Internet Explorer Windows

      呵呵,你也快乐~

      2010-12-31 22:49 [回复]
  9. avatar
    18楼
    C瓜哥 Mozilla Firefox Windows

    就是我之前用的那个

    2010-12-31 13:15 [回复]
    • avatar
      William Internet Explorer Windows

      是么,呵呵

      2010-12-31 22:49 [回复]
  10. avatar
    17楼
    song Google Chrome Windows

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

    2010-12-31 13:01 [回复]
    • avatar
      William Internet Explorer Windows

      呵呵,想当初我也是时时刻刻的研究PJBlog的。
      话说自己动手学的更多。

      2010-12-31 22:48 [回复]
  11. avatar
    16楼
    优趣 Google Chrome Windows

    哇哦、牛,CSS3 强大啊!

    2010-12-31 12:51 [回复]
    • avatar
      William Internet Explorer Windows

      恩,CSS3是比较强大,配合HTML5就更棒了

      2010-12-31 22:39 [回复]
  12. avatar
    15楼
    雅岚 Mozilla Firefox Windows

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

    2010-12-31 12:18 [回复]
    • avatar
      William Internet Explorer Windows

      IE9以下的都不支持CSS3,可惜啊~

      2010-12-31 22:58 [回复]
  13. avatar
    14楼
    david Mozilla Firefox Windows

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

    2010-12-31 03:33 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      哈哈,是的,国外的Logo相对国内的要简洁。

      2010-12-31 11:02 [回复]
      • avatar
        david Mozilla Firefox Windows

        是啊。嘿嘿,新年快乐哦。

        2011-01-05 04:33 [回复]
  14. avatar
    13楼
    skidu Google Chrome Windows

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

    2010-12-30 21:11 [回复]
    • avatar
      William Internet Explorer Windows

      我也是无意发现的,觉得挺实用的,就发上来额。

      2010-12-30 23:43 [回复]
  15. avatar
    12楼
    xmwusx.cn Internet Explorer Windows

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

    2010-12-30 20:33 [回复]
    • avatar
      William Internet Explorer Windows

      兼容一直是个比较麻烦的问题,当然,高质量的CSS在兼容方面是很棒的。不用一个Hack去兼容所有浏览器。

      2010-12-30 23:42 [回复]
  16. avatar
    11楼
    爱惜 Internet Explorer Windows

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

    2010-12-30 19:44 [回复]
    • avatar
      William Internet Explorer Windows

      先从CSS开始,CSS3等熟悉了CSS就上手快了

      2010-12-30 23:41 [回复]
  17. avatar
    10楼
    浩子窝窝 Internet Explorer Windows

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

    2010-12-30 18:47 [回复]
    • avatar
      William Internet Explorer Windows

      哈哈,你应该经常写CSS吧

      2010-12-30 23:40 [回复]
  18. avatar
    9楼
    逝魂 Maxthon Windows

    我也不怎么会~ 学习了

    2010-12-30 15:41 [回复]
    • avatar
      William Internet Explorer Windows

      呵呵,不会吧,我以为你会很懂的

      2010-12-30 23:40 [回复]
  19. avatar
    8楼
    远走高飞 Mozilla Firefox Windows

    css原来这么强大的~~

    2010-12-30 14:23 [回复]
    • avatar
      William Internet Explorer Windows

      是的,很强大

      2010-12-30 23:39 [回复]
  20. 额css我还是不行……

    2010-12-30 13:11 [回复]
    • avatar
      William Internet Explorer Windows

      其他行就OK了

      2010-12-30 23:39 [回复]
  21. avatar
    6楼
    龙城瓶子 Mozilla Firefox Windows

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

    2010-12-30 12:45 [回复]
    • avatar
      William Internet Explorer Windows

      其实CSS是所有代码中最容易上手的了。

      2010-12-30 23:38 [回复]
  22. avatar
    5楼
    纯野 Internet Explorer Windows

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

    2010-12-30 12:25 [回复]
    • avatar
      William Internet Explorer Windows

      额,怎么会头痛呢,欣赏就可以了

      2010-12-30 23:38 [回复]
  23. avatar
    4楼
    Prouz Google Chrome Windows

    不错,学习一下!

    2010-12-30 11:23 [回复]
    • avatar
      William Internet Explorer Windows

      恩,的确值得学习的

      2010-12-30 23:44 [回复]
  24. avatar
    地板
    gooder8 Mozilla Firefox Windows

    CSS是月来月强大了

    2010-12-30 09:33 [回复]
    • avatar
      William Internet Explorer Windows

      一直都很强大,就是浏览器不给力啊

      2010-12-30 23:37 [回复]
  25. avatar
    板凳
    蛋糕 Internet Explorer Windows

    学习一下!

    2010-12-30 02:57 [回复]
    • avatar
      William Internet Explorer Windows

      很有必要~

      2010-12-30 23:37 [回复]
  26. avatar
    沙发
    wmtimes Google Chrome Windows

    嗯。都相当不错啊。

    2010-12-30 00:24 [回复]
    • avatar
      William Internet Explorer Windows

      恩,很适合初学者。

      2010-12-30 23:36 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter