Apple 携帯電話用のメッセージ アイコンを作成する CSS3、superパワフル_html/css_WEB-ITnose

< ;style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.icon {width: 56px ;高さ: 56px;z-index: 10;position: 絶対;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 scan {
表示: ブロック;テキスト配置: センター;フォント: ボールド 11 ピクセル/15 ピクセル "Helvetica Neue"、Arial、Helvetica、Geneva、sans-serif;color: #fff;position: 絶対;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;
位置: 相対;
オーバーフロー: 非表示;
カーソル: ポインター;
背景: - webkit-linear-gradient(top, #015801, #06f700);
背景: -moz-linear-gradient(top, #015801, #06f700);
背景: -ms-linear-gradient(top, #015801, # 06f700);
背景: -o-linear-gradient(top, #015801, #06f700);
背景: Linear-gradient(top, #015801, #06f700);
-ms-filter: progid:DXImageTransform.Microsoft. gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0);
フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0) ;
オーバーフロー: 非表示;
}

.i_message .bg_angled {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 125%;
高さ: 125%;
位置: 絶対;
左: -7px;
上: -7px;
-webkit-background-size: 4px 4px;
-moz-background-size: 4px 4px;
-ms-background -サイズ: 4px 4px;
-o-背景サイズ: 4px 4px;
背景サイズ: 4px 4px;
背景色: なし;
背景画像: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);
背景画像: -moz-linear-gradient(top, rgba(255 , 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);
背景画像: -ms-linear-gradient(top, rgba( 255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);
背景画像: -o-linear-gradient(top, rgba) (255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);
背景画像: Linear-gradient(top, rgba(255 , 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);
-webkit-transform: 回転(-45deg);
-moz-変換: 回転(-45 度);
-ms-transform: 回転(-45 度);
-o-transform: 回転(-45 度);
変換: 回転(-45 度);
}

.i_message:after{
コンテンツ: '';
-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%;
高さ: 100%;
位置: 絶対;
表示: ブロック;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-インデックス: 2;
}

.i_message:before{
コンテンツ: '';
幅: 100%;
高さ: 50%;
位置: 絶対;
表示: ブロック;
-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;
背景: 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 {
位置: 絶対;
幅: 39px;
高さ: 32px;
上: 47%;
左: 50%;
margin-left: -19.5px;
margin-top: -16px;
-webkit-border-radius: 50%/50%;
-moz-border-radius: 50%/50%;
border-radius: 50%/50%;
背景: -webkit-linear-gradient(bottom) , #fff, #cbdae9 50%);
背景: -moz-linear-gradient(bottom, #fff, #cbdae9 50%);
背景: -ms-linear-gradient(bottom, #fff, #cbdae9 50% );
背景:-o-linear-gradient(bottom, #fff, #cbdae9 50%);
背景:linear-gradient(bottom, #fff, #cbdae9 50%);
-ms-filter: progid:DXImageTransform .Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0);
フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType =0);
-webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px、インセット #e7e8e9 0 -1px 0;
-moz-box-shadow: rgba(0,0,0, 0.4) 0 0 2px、インセット #e7e8e9 0 -1px 0;
ボックスシャドウ: rgba(0,0,0,0.4) 0 0 2px、インセット #e7e8e9 0 -1px 0;
z-index: 2;
}

.i_message .tail {
位置: 絶対;
背景: #fff;
幅: 11px;
高さ: 7px;
左: 11px;
下: 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、インセット #e7e8e9 0 -1px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px、インセット #e7e8e9 0 -1px 0;
box-shadow: rgba(0,0,0,0.4) 0 0 2px、インセット #e7e8e9 0 -1px 0;
}

.i_message .tail:after {
コンテンツ: '';
位置: 絶対;
幅: 10px;
高さ: 10px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
left : -6px;
上: -3px;
背景:-webkit-linear-gradient(下, #05d400, #04ba00);
背景:-moz-linear-gradient(下, #05d400, #04ba00);
背景:-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);
フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr='# 04ba00', endColorstr='#05d400', GradientType=0);
}

.i_message .tail:before {
コンテンツ: '';
位置: 絶対;
幅: 10px;
高さ: 10px;
-webkit -border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
左: -6px;
上: -3px;
-webkit-background-size: 4px 4px;
-moz -背景サイズ: 4px 4px;
-ms-背景サイズ: 4px 4px;
-o-背景サイズ: 4px 4px;
背景サイズ: 4px 4px;
背景画像:-webkit-linear-gradient(上、rgba(255, 255, 255, .2) 0%、rgba(255, 255, 255, .2) 20%、透明 20%、透明 70%、rgba(255, 255, 255, .2) 70 %, rgba(255, 255, 255, .2) 100%);
背景-画像:-moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255 、255、.2) 20%、透明 20%、透明 70%、rgba(255, 255, 255, .2) 70%、rgba(255, 255, 255, .2) 100%);
背景画像:-ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, 透明 20%, 透明 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
背景画像:-o-linear-gradient(top, rgba(255, 255, 255, .2) 0%、rgba(255、255、255、.2) 20%、透明 20%、透明 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%, 透明 20%, 透明 70% 、rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%);
-webkit-transform: 回転(-45度);
-moz-transform: 回転( -45 度);
-ms-transform: 回転(-45 度);
-o-transform: 回転(-45 度);
変換: 回転(-45 度);
z-index: 10;
}

.i_message .hack {
背景:-webkit-linear-gradient(top, #ebf1f7, #fff);
背景:-moz-linear-gradient(top, #ebf1f7, #fff);
背景:-ms- Linear-gradient(top, #ebf1f7, #fff);
背景:-o-linear-gradient(top, #ebf1f7, #fff);
背景:linear-gradient(top, #ebf1f7, #fff);
- ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f7', endColorstr='#ffffff', GradientType=0);
フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f7', endColorstr ='#ffffff', GradientType=0);
幅: 5px;
高さ: 5px;
左: 15px;
上: 36px;
位置: 絶対;
z-index: 10;
-webkit-border-radius :0 0 3px 0;
-moz-border-radius:0 0 3px 0;
border-radius:0 0 3px 0;
}



< ;div>http://www.999jiujiu.com/