CSS3制作精美的iphone电话图标，不使用图片

<!DOCTYPE HTML>

<html lang=zh-cn>

<head>

<meta charset=utf-8>

<title>CSS3完美实现iphone电话图标</title>

<style>

*{margin:0px;padding:0px;}

body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}

.icon {width: 56px;height: 56px;z-index: 10;position: absolute;left: 50%;top: 50%;margin-left: -28px;margin-top: -28px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;

-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;

box-shadow: rgba(0,0,0,0.5) 0 1px 2px;

}

.icon span {

display: block;text-align: center;font: bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;color: #fff;position: absolute;top: 58px;left: -10px;width: 76px;

text-shadow: rgba(0,0,0,0.3) 1px 2px 1px;

text-transform: capitalize;

}

.i_phone {

width: 100%;height: 100%;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

position: relative;

overflow: hidden;

cursor: pointer;

background:-webkit-linear-gradient(top, #015801, #06f700);

background:-moz-linear-gradient(top, #015801, #06f700);

background:-ms-linear-gradient(top, #015801, #06f700);

background:-o-linear-gradient(top, #015801, #06f700);

background:linear-gradient(top, #015801, #06f700);

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0);

}

.i_phone .bg_angled {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

width: 125%;

height: 125%;

position: absolute;

left: -7px;

top: -7px;

-webkit-background-size: 4px 4px;

-moz-background-size: 4px 4px;

-ms-background-size: 4px 4px;

-o-background-size: 4px 4px;

background-size: 4px 4px;

background-color: none;

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);

background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);

background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);

background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%);

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.i_phone:after{

content: '';

-webkit-box-shadow: inset #06f700 0 0 2px;

-moz-box-shadow: inset #06f700 0 0 2px;

box-shadow: inset #06f700 0 0 2px;

width: 100%;

height: 100%;

position: absolute;

display: block;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

z-index: 2;

}

.i_phone:before{

content: '';

width: 100%;

height: 50%;

position: absolute;

display: block;

-webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;

-moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;

border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;

background: rgba(255,255,255,0.5);

z-index: 5;

-webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;

-moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;

box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;

}

.i_phone .truba {

position: absolute;

top: 7px;

left: 5px;

z-index: 1;

width: 40px;

height:40px;

font: bold 40px/40px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;

color: #f1f5f9;

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-o-transform: rotate(90deg);

transform: rotate(90deg);

text-shadow: rgba(0,0,0,0.5) 0 0 2px;

}

.i_phone .truba:after {

content: '';

position: absolute;

width: 12px;

height: 10px;

top: 2px;

left: 25px;

background: #f1f5f9;

-webkit-border-radius: 50% / 2px 2px 6px 2px;

-moz-border-radius: 50% / 2px 2px 6px 2px;

border-radius: 50% / 2px 2px 6px 2px;

-webkit-transform: rotate(-57deg);

-moz-transform: rotate(-57deg);

-ms-transform: rotate(-57deg);

-o-transform: rotate(-57deg);

transform: rotate(-57deg);

}

.i_phone .truba:before {

content: '';

position: absolute;

width: 12px;

height: 10px;

top: 24px;

left: 4px;

background: #f1f5f9;

-webkit-border-radius: 50% / 2px 2px 2px 6px;

-moz-border-radius: 50% / 2px 2px 2px 6px;

border-radius: 50% / 2px 2px 2px 6px;

-webkit-transform: rotate(-25deg);

-moz-transform: rotate(-25deg);

-ms-transform: rotate(-25deg);

-o-transform: rotate(-25deg);

transform: rotate(-25deg);

}

.i_phone .truba b {

position: absolute;

width: 35px;

height: 4px;

top: 17px;

left: 7px;

background: #f1f5f9;

border-radius: 0 0 5px 5px;

-webkit-transform: rotate(-47deg);

-moz-transform: rotate(-47deg);

-ms-transform: rotate(-47deg);

-o-transform: rotate(-47deg);

transform: rotate(-47deg);

}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div class="icon">

<div class="i_phone">

<div class="bg_angled"></div>

<div class="truba"><b></b></div>

</div>

<span>Phone</span>

</div>

</body>

</html>

CSS3制作精美的iphone电话图标，不使用图片的更多相关文章

学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...
图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程首先,当有人说你能不能 ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
详解用CSS3制作圆形滚动进度条动画效果
主题今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...

随机推荐

《数字图像处理原理与实践（MATLAB版）》一书之代码Part2
本文系<数字图像处理原理与实践(MATLAB版)>一书之代码系列的Part2(P43~80),代码运行结果请參见原书配图,建议下载代码前阅读下文: 关于<数字图像处理原理与实践(MA ...
《Nginx文件类型错误解析漏洞－－攻击演练》 (转)
今天看书看到其中提到的一个漏洞,那就是Nginx+PHP的服务器中,如果PHP的配置里 cgi.fix_pathinfo=1 那么就会产生一个漏洞.这个配置默认是1的,设为0会导致很多MVC框架(如T ...
SWT实践过程中遇到的问题
1.import org.eclipse.swt.widgets.Text; 诸如右所示的找不到这个包. 解决办法:project->properties->build path-> ...
hdu 4465 Candy（2012 ACM-ICPC 成都现场赛）
简单概率题,可以直接由剩余n个递推到剩余0个.现在考虑剩余x个概率为(1-p)的candy时,概率为C(2 * n - x, x) * pow(p, n + 1) *pow(1 - p, n - x ...
用NMAKE创建VS2012 C++工程 HelloWorld
由于需要精通GDAL的源代码,所以还是有必要精通NMAKE,先来尝试创建一个NMAKE工程. 之前一篇文章Windows7中Emacs 24 shell使用Gitbash已经介绍了如何在Emacs的s ...
图片预览插件 fancyBox
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox. 它除了能够展示图片之外,还能够展示 flash.iframe 内容.html 文本以及 ajax 调用.我们能够通过 css ...
《Android内核剖析》读书笔记第13章 View工作原理【View树遍历】
View状态分类在View视图中定义了多种和界面效果相关的状态,比如拥有焦点Focused.按下Pressed等,不同的状态一般会显示不同的界面效果,而且视图状态会随着用户的操作而改变,一般通过xm ...
HorizontalScrollView做页卡的一个小记录
用HorizontalScrollView做页卡,实现一个如下图的效果:
poj 2369 Permutations 更换水称号
寻找循环节求lcm够了,如果答案是12345应该输出1.这是下一个洞. #include<iostream> #include<cstdio> #include<cstr ...
uva297（quadtree）
给我们两棵quadtree的前序遍历,要我吗求原来32*32的矩阵有多少个位置是黑的 quardtree是将区域划分为相等的4个子空间,然后再递归划分这4个子空间,知道满足条件后终止划分这题的终止条 ...

CSS3制作精美的iphone电话图标，不使用图片

CSS3制作精美的iphone电话图标，不使用图片的更多相关文章

随机推荐

热门专题