当前位置：编程学习 > JS >>

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

采用CSS3技术实现的仿iPhone苹果手机的Message图标，暴牛超酷！不得不佩服作者很牛比的水平！期待大家借鉴。这也让我觉得CSS3真是一个好东西。请点击制作说明到官方网站查看教程。
答案：<!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);
	filt

上一个：HTML5 canvas 跑动的小人
下一个：css3进度条

更多图片编程知识:
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js把图片转换成 base64代码
js把base代码转换成图片
JS 将 base64编码的图片转化为图片文件
js中的定时器
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，