CSS3制作苹果手机的Message图标,超强大

原创 2015年07月07日 12:23:11
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>iphone的message图标</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_message {
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);
    overflow: hidden;
}


.i_message .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_message: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_message: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_message .bulb {
    position: absolute;
    width: 39px;
    height: 32px;
    top: 47%;
    left: 50%;
    margin-left: -19.5px;
    margin-top: -16px;
    -webkit-border-radius: 50%/50%;
-moz-border-radius: 50%/50%;
border-radius: 50%/50%;
    background: -webkit-linear-gradient(bottom, #fff, #cbdae9 50%);
    background: -moz-linear-gradient(bottom, #fff, #cbdae9 50%);
    background: -ms-linear-gradient(bottom, #fff, #cbdae9 50%);
    background: -o-linear-gradient(bottom, #fff, #cbdae9 50%);
    background: linear-gradient(bottom, #fff, #cbdae9 50%);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0);
    -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
    z-index: 2;
}


.i_message .tail {
    position: absolute;
    background: #fff;
    width: 11px;
    height: 7px;
    left: 11px;
    bottom: 12px;
    -webkit-border-radius: 0 0 100% 0/ 0 0 100% 0;
-moz-border-radius: 0 0 100% 0/ 0 0 100% 0;
border-radius: 0 0 100% 0/ 0 0 100% 0;
    z-index: 1;
    -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0;
}


.i_message .tail:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
    left: -6px;
    top: -3px;
    background:-webkit-linear-gradient(bottom, #05d400, #04ba00);
    background:-moz-linear-gradient(bottom, #05d400, #04ba00);
    background:-ms-linear-gradient(bottom, #05d400, #04ba00);
    background:-o-linear-gradient(bottom, #05d400, #04ba00);
    background:linear-gradient(bottom, #05d400, #04ba00);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04ba00', endColorstr='#05d400', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04ba00', endColorstr='#05d400', GradientType=0);
}


.i_message .tail:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
    left: -6px;
    top: -3px;
    -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-image:-webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
    background-image:-moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
    background-image:-ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
    background-image:-o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
    background-image:linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%,  transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
    -webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
    z-index: 10;
}


.i_message .hack {
    background:-webkit-linear-gradient(top, #ebf1f7, #fff);
    background:-moz-linear-gradient(top, #ebf1f7, #fff);
    background:-ms-linear-gradient(top, #ebf1f7, #fff);
    background:-o-linear-gradient(top, #ebf1f7, #fff);
    background:linear-gradient(top, #ebf1f7, #fff);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f7', endColorstr='#ffffff', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f7', endColorstr='#ffffff', GradientType=0);
    width: 5px;
    height: 5px;
    left: 15px;
    top: 36px;
    position: absolute;
    z-index: 10;
    -webkit-border-radius:0 0 3px 0;
-moz-border-radius:0 0 3px 0;
border-radius:0 0 3px 0;
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div class="icon">
<div class="i_message">
<div class="bg_angled"></div>
<div class="bulb"></div>
<div class="tail"></div>
<div class="hack"></div>
</div>
<span>Message</span>
</div>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F7b1b0a3f92f550c351b60c95bab723a4' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

使用CSS3绘制关闭以及箭头图标

Title div { float: left; margin-right: 5%; } a ...
  • gx15366039985
  • gx15366039985
  • 2016年11月21日 21:02
  • 1662

CSS3中用自定义字体实现小图标icon

最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的...
  • p312011150
  • p312011150
  • 2017年04月21日 11:33
  • 1135

CSS3利用@font-face使用自定义字符和图标

前言今天在看wordpress主题的时候,看到一个`class`名为`fa fa-weibo` 当时想知道这是什么用法,然后就找了一下style.css 文件,看看具体的CSS内容,然后发现这是一个很...
  • u011675745
  • u011675745
  • 2016年10月05日 20:37
  • 2607

20个超炫的HTML5 /CSS3免费网页设计模板

时至今日,几乎所有的网页模板都采用HTML5 /CSS3来设计。其主要原因是HTML5 和 CSS3非常容易学习,并且只要很短的时间和很少的精力,就能创建结构合理、布局精美的网页模板。另外,HTM...
  • natalie86
  • natalie86
  • 2015年01月31日 16:55
  • 2574

用 CSS3 画心形和搜索放大镜图标

用 CSS3 画心形 1、先来个class="heart"的div div class="heart">div>  2、讲上面的 div 整成红色的正方形,然后转 45 ...
  • zongzhenshuozv
  • zongzhenshuozv
  • 2016年08月31日 18:42
  • 1755

css3 加载loading图标实现

常见的loading图标,大概的样子是这样:(录制的gif,比较卡) 看到大牛的面试中被问到这个问题,我就想自己动手实现一下。我们来用20行代码实现一下。 代码如下: 加载效果 ...
  • Maci_yera
  • Maci_yera
  • 2017年08月27日 00:34
  • 486

CSS-3D之制作3D骰子

CSS-3D之制作3D骰子 css3 3d其实还是转换的一种,css3提供了2D转换,里面有位移、缩放、旋转、斜拉,这些个效果都是在2d平面上的效果。那么3d其实就是多了一个维度,也就是多了个坐标轴...
  • b1244154318
  • b1244154318
  • 2016年09月16日 12:36
  • 536

如何使用纯CSS3实现一个沙漏动画

要实现一个沙漏动画,我们首先需要实现一个漏斗的几何形状。漏斗图形我们接着把漏斗拆分成3个简单图形:一个三角形,一个倒置三角形和中间的管道(垂直线)。那么问题就简化为实现三角形和直线。要实现三角形很简单...
  • iefreer
  • iefreer
  • 2016年03月30日 16:02
  • 2378

用css3实现各种图标效果

公共样式手机上的切换标签中英切换标签样式各种点(空心点、实心点、蓝色点、橙色点)箭头航线两种不同方式实现的warning大小不一的radio各种不同的checkbox 详情(也就是三横线) ...
  • qq_27278679
  • qq_27278679
  • 2016年09月28日 09:53
  • 126

canvas图标库大合集-持续更新-html5+js画小图片,零基础可使用

严正声明:本文代码可以任意裁切(累赘可割),新老手都适合。免费使用,欢迎伸手 新手请看:即便您只有一点点html基础,没有任何CSS+JS基础,也可以完美使用本图标库(在html页面用代码画图标) 话...
  • java_qq_99811494
  • java_qq_99811494
  • 2017年07月14日 17:36
  • 750
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3制作苹果手机的Message图标,超强大
举报原因:
原因补充:

(最多只允许输入30个字)