今天在网上搜寻各个网站的图标,于是就发现了这个,用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 | 威言威语
呵呵,不错,这种图标都好漂亮呀!
cool!!
给力
不错啊~~~
代码不少啊。。。
最头疼的是兼容问题
其实IE6麻烦点外,其他的兼容还是容易实现的
嗯,不错的分享,祝元旦快乐!
呵呵,同乐~
预祝博主元旦快乐
呵呵,你也快乐~
就是我之前用的那个
是么,呵呵
两天没有过来了,在折腾我自己的单栏的PJ呢,想在2011之前搞完,很多次想给你发个邮件问些问题,但都坚持下来了,还是想要能解决的自己全解决,这次的样子是我一直想要的,想了很久,原来是想等看别人的样式看透了再开始,但总觉得自己步子迈的不够大,终于狠了一下心,开工了……
对于CSS,真的所知太少了,所以总喜欢呆在你这里,感染一些灵气吧……
新年快乐!!!!!嗨呸牛耶~~~~
呵呵,想当初我也是时时刻刻的研究PJBlog的。
话说自己动手学的更多。
哇哦、牛,CSS3 强大啊!
恩,CSS3是比较强大,配合HTML5就更棒了
魔女来也。。。
图片圆角貌似IE下不支持。。。一如我的魔板头图。。
IE9以下的都不支持CSS3,可惜啊~
这个不错哦,蛮漂亮的图片,我一会也去试试。
哈哈,是的,国外的Logo相对国内的要简洁。
是啊。嘿嘿,新年快乐哦。
老兄爆猛料了?先偷下去研究研究……嘿嘿……
我也是无意发现的,觉得挺实用的,就发上来额。
css最最烦人,个个浏览器都不一样 有时要要被他高峰了!
为神马看别人网页的风格都很漂亮 看自己的就觉得不三不四
兼容一直是个比较麻烦的问题,当然,高质量的CSS在兼容方面是很棒的。不用一个Hack去兼容所有浏览器。
对于CSS,我懂得几个简单的属性。这些我还看不懂。
先从CSS开始,CSS3等熟悉了CSS就上手快了
CSS3原来这么强大哟。。学习了。
哈哈,你应该经常写CSS吧
我也不怎么会~ 学习了
呵呵,不会吧,我以为你会很懂的
css原来这么强大的~~
是的,很强大
额css我还是不行……
其他行就OK了
CSS啊,不想搞
没那水平也没那时间。。。
其实CSS是所有代码中最容易上手的了。
呃,看到这些东西真让人头痛。
额,怎么会头痛呢,欣赏就可以了
不错,学习一下!
恩,的确值得学习的
CSS是月来月强大了
一直都很强大,就是浏览器不给力啊
学习一下!
很有必要~
嗯。都相当不错啊。
恩,很适合初学者。