CSS3制作苹果手机的Message图标，超强大_html/css_WEB-ITnose

iphone的message图标 *{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; }

http://www.999jiujiu.com/ Message 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"));

CSS3制作苹果手机的Message图标，超强大_html/css_WEB-ITnose

Related articles