威言威语

我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 设计 > 正文

用CSS3制作SNS网站图标

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

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

您可能还会对这些文章感兴趣!

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

  1. avatar
    26楼

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

    2012-03-17 02:55 回复
  2. avatar
    25楼

    cool!!

    2011-04-05 15:28 回复
  3. avatar
    24楼

    给力

    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楼

    最头疼的是兼容问题

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

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

      2010-12-31 22:55 回复
  7. avatar
    20楼

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

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

      呵呵,同乐~

      2010-12-31 22:52 回复
  8. avatar
    19楼

    预祝博主元旦快乐

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

      呵呵,你也快乐~

      2010-12-31 22:49 回复
  9. avatar
    18楼

    就是我之前用的那个

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

      是么,呵呵

      2010-12-31 22:49 回复
  10. avatar
    17楼

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

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

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

      2010-12-31 22:48 回复
  11. avatar
    16楼

    哇哦、牛,CSS3 强大啊!

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

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

      2010-12-31 22:39 回复
  12. avatar
    15楼

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

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

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

      2010-12-31 22:58 回复
  13. avatar
    14楼

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

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

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

      2010-12-31 11:02 回复
      • avatar

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

        2011-01-05 04:33 回复
  14. avatar
    13楼

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

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

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

      2010-12-30 23:43 回复
  15. avatar
    12楼

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

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

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

      2010-12-30 23:42 回复
  16. avatar
    11楼

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

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

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

      2010-12-30 23:41 回复
  17. avatar
    10楼

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

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

      哈哈,你应该经常写CSS吧

      2010-12-30 23:40 回复
  18. avatar
    9楼

    我也不怎么会~ 学习了

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

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

      2010-12-30 23:40 回复
  19. avatar
    8楼

    css原来这么强大的~~

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

      是的,很强大

      2010-12-30 23:39 回复
  20. avatar
    7楼

    额css我还是不行……

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

      其他行就OK了

      2010-12-30 23:39 回复
  21. avatar
    6楼

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

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

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

      2010-12-30 23:38 回复
  22. avatar
    5楼

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

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

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

      2010-12-30 23:38 回复
  23. avatar
    4楼

    不错,学习一下!

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

      恩,的确值得学习的

      2010-12-30 23:44 回复
  24. avatar
    地板

    CSS是月来月强大了

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

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

      2010-12-30 23:37 回复
  25. avatar
    板凳

    学习一下!

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

      很有必要~

      2010-12-30 23:37 回复
  26. avatar
    沙发

    嗯。都相当不错啊。

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

      恩,很适合初学者。

      2010-12-30 23:36 回复

发表评论

avatar

电子邮件地址不会被公开。 必填项已用 * 标注

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

快捷键:Ctrl+Enter