纯css3(无图片/js)制作的几个社交媒体网站的图标


Posted in HTML / CSS onMarch 21, 2013

用纯css3和html来制作一些社交媒体的图标,虽然没有图片和javascirpt,css3配合 html也能实现这些图标。

html代码如下:

复制代码
代码如下:

<div class="content">
<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>
</div>

css代码如下:
复制代码
代码如下:

body {
padding:0;
margin:0;
font:1em/1.4 Cambria, Georgia, sans-serif;
color:#333;
background:#fff;
}
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 trasparent;
line-height:64px;
;
text-decoration:none;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
ul li a:hover, ul li a:focus, ul li a:active {
opacity:0.8;
border-color:#000;
}
.facebook a {
position:relative;
border-color:#3c5a98;
text-transform:lowercase;
text-indent:34px;
letter-spacing:10px;
font-weight:bold;
font-size:64px;
line-height:66px;
color:#fff;
background:#3c5a98;
-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);
}
.twitter a {
position:relative;
border-color:#a8eaec;
text-transform:lowercase;
text-indent:20px;
letter-spacing:40px;
font:bold 60px/1 Tahoma, Geneva, sans-serif;
line-height:60px;
color:#76ddf8;
background:#daf6f7;
text-shadow:3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
-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(#dbf7f8), to(#88e1e6));
background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
background:-o-linear-gradient(top, #dbf7f8, #88e1e6);
background:linear-gradient(top, #dbf7f8, #88e1e6);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#dbf7f8", endColorstr="#88e1e6");
}
.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;
-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));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#f19242", endColorstr="#e36443");
}
.rss a:before {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:12px;
height:12px;
background:#ffffff;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
.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;
-moz-border-radius:0 50px 0 0;
-webkit-border-top-right-radius:50px;
border-radius:0 50px 0 0;
}
.flickr a {
position:relative;
border-color:#d2d2d2;
text-indent:-9000px;
font-size:108px;
font-weight:bold;
color:#fff;
background:#fff;
-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(#fff), to(#d2d2d2));
background:-moz-linear-gradient(top, #fff, #d2d2d2);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#ffffff", endColorstr="#d2d2d2");
}
.flickr a:before {
content:"\00a0";
position:absolute;
top:50%;
left:30%;
width:20px;
height:20px;
margin:-10px 0 0 -10px;
background:#085ec5;
border:1px solid #003c84;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background:-webkit-gradient(linear, left top, left bottom, from(#005cc6), to(#003d83));
background:-moz-linear-gradient(top, #005cc6, #003d83);
background:-o-linear-gradient(top, #005cc6, #003d83);
background:linear-gradient(top, #005cc6, #003d83);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#005cc6", endColorstr="#003d83");
}
.flickr a:after {
content:"\00a0";
position:absolute;
top:50%;
right:30%;
width:20px;
height:20px;
margin:-10px -10px 0 0;
border:1px solid #ba0060;
background:#fd1e93;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
background:-webkit-gradient(linear, left top, left bottom, from(#fd1e93), to(#cb026c));
background:-moz-linear-gradient(top, #fd1e93, #cb062c);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#fd1e93", endColorstr="#cb026c");
}
.delicious a {
position:relative;
border-color:#d2d2d2;
text-align:center;
font-size:108px;
font-weight:bold;
color:#fff;
background:#fff;
text-indent:-9999px;
-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(#fff), to(#d1d1d1));
background:-moz-linear-gradient(top, #fff, #d1d1d1);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#ffffff", endColorstr="#d1d1d1");
}
.delicious a:before {
content:"\00a0";
position:absolute;
top:0;
right:0;
width:30px;
height:30px;
border:1px solid #0060ce;
background:#085ec5;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
background:-webkit-gradient(linear, left top, left bottom, from(#0060ce), to(#003b7f));
background:-moz-linear-gradient(top, #0060ce, #003b7f);
}
.delicious a:after {
content:"\00a0";
position:absolute;
left:0;
bottom:0;
width:30px;
height:30px;
border:1px solid #000;
background:#000;
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
background:-webkit-gradient(linear, left top, left bottom, from(#212121), to(#000000));
background:-moz-linear-gradient(top, #212121, #000000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#212121", endColorstr="#000000");
}
.linkedin a {
position:relative;
width:60px;
overflow:hidden;
padding:0 2px;
border-color:#185c80;
text-transform:lowercase;
text-indent:-185px;
font-size:64px;
font-weight:bold;
color:#fff;
background:#0c6596;
-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(#5babcb), to(#0c6596));
background:-moz-linear-gradient(top, #5babcb, #0c6596);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#5babcb", endColorstr="#0c6596");
}
.google a {
position:relative;
border-color:#26478d;
text-transform:lowercase;
text-indent:16px;
letter-spacing:40px;
font: 65px/44px Georgia, Times New Roman, Times, serif;
color:#fff;
background:#1e3c7f;
-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(#447aec), to(#1e3c7f));
background:-moz-linear-gradient(top, #447aec, #1e3c7f);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#447aec", endColorstr="#1e3c7f");
}
.orkut a {
position:relative;
border-color:#b4c4dd;
text-indent:-9000px;
font-size:108px;
color:#b62b91;
background:#fff;
-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(#fff), to(#ceddf6));
background:-moz-linear-gradient(top, #fff, #ceddf6);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#ffffff", endColorstr="#ceddf6");
}
.orkut a:before {
content:"\00a0";
position:absolute;
top:50%;
left:50%;
width:40px;
height:40px;
border:1px solid #b0699e;
margin:-21px 0 0 -21px;
background:#d779c0;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
-moz-box-shadow:0 0 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 0 2px rgba(0,0,0,0.6);
box-shadow:0 0 2px rgba(0,0,0,0.6);
}
.orkut a:after {
content:"\00a0";
position:absolute;
top:50%;
left:50%;
height:26px;
width:26px;
margin:-13px 0 0 -13px;
background:#ffffff;
-moz-border-radius:26px;
-webkit-border-radius:26px;
border-radius:26px;
-moz-box-shadow: 0 0 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.6);
box-shadow: 0 0 2px rgba(0,0,0,0.6);
background:-webkit-gradient(linear, left top, left bottom, from(#eff4fc), to(#dce6f8));
background:-moz-linear-gradient(top, #eff4fc, #dce6f8);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#eff4fc", endColorstr="#dce6f8");
}
.technorati a {
position:relative;
border-color:#266f12;
text-indent:-9999px;
font-size:108px;
color:#b62b91;
background:#086b04;
-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(#a3d679), to(#086b04));
background:-moz-linear-gradient(top, #a3d679, #086b04);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#a3d679", endColorstr="#086b04");
}
.technorati a:before {
content:"\00a0";
position:absolute;
top:5px;
right:-5px;
width:40px;
height:25px;
border:8px solid #f5f5f5;
-moz-border-radius:45px/35px;
-webkit-border-top-left-radius:45px 35px;
-webkit-border-top-right-radius:45px 35px;
-webkit-border-bottom-right-radius:45px 35px;
-webkit-border-bottom-left-radius:45px 35px;
border-radius:45px/35px;
-moz-box-shadow:0 0 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 0 2px rgba(0,0,0,0.6);
box-shadow:0 0 2px rgba(0,0,0,0.6);
}
.technorati a:after {
content:"\00a0";
position:absolute;
top:40px;
left:20px;
width:0;
height:0;
border-width:0 0 18px 13px;
border-style:solid;
border-color: transparent #f5f5f5;
}
.netvibes a {
position:relative;
border-color:#0c5f0c;
text-align:center;
text-indent:-9000px;
font-size:178px;
font-weight:bold;
color:#fff;
background:#138210;
-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(#68db21), to(#138210));
background:-moz-linear-gradient(top, #68db21, #138210);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#68db21", endColorstr="#138210");
}
.netvibes a:after {
content:"+";
position:absolute;
left:0;
top:0;
width:64px;
text-indent:0;
text-align:center;
font-size:88px;
color:#fff;
}

在浏览器中的预览效果

  在firefox3.6中:

纯css3(无图片/js)制作的几个社交媒体网站的图标

在chrome中预览效果:

纯css3(无图片/js)制作的几个社交媒体网站的图标

在ie9中预览效果:

纯css3(无图片/js)制作的几个社交媒体网站的图标

在ie8中预览效果:

纯css3(无图片/js)制作的几个社交媒体网站的图标

主要支持的浏览器有:irefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 #HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 #HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 #HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 #HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 #HTML / CSS
css3.0 图形构成实例练习二
Mar 19 #HTML / CSS
css3.0 图形构成实例练习一
Mar 19 #HTML / CSS
You might like
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
Javascript Objects详解
2014/09/04 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
浅谈五大Python Web框架
2017/03/20 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python使用re模块验证危险字符
2020/05/21 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
园林资料员岗位职责
2013/12/30 职场文书
思想品德课教学反思
2014/02/10 职场文书
高中生评语大全
2014/04/25 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
读书之星事迹材料
2014/05/12 职场文书
维修工先进事迹
2014/05/29 职场文书
成本会计实训报告
2014/11/05 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python