かわいいふきだし

GeckoTang

2011-02-23 14:42:02

License: MIT License

Fork: 22

Fav: 37

View: 63537

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 22 lines
CSS 332 lines

全部かわいいのはwebkitだけ！

ハート型はハート文字を使っているので
環境によっては綺麗に出ないと思う。

ブログに転載：http://t.co/sZNv8p1

かわいいふきだし

かわいいふきだし
YUI 3 CSS Reset

/*
 * SpeechBalloon
 */
.SpeechBalloon{
    position:relative;
}
.SpeechBalloon p{font-size:12px;}

/*
 * SpeechBalloon Type1
 */
.SpeechBalloon.type1 {
    margin:0 auto 20px;
    left:-75px;
    width:100px;
    height:100px;
    background:#FF54AC;
    border-radius:50px;
    -moz-border-radius:50px;
    -webkit-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
    -moz-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
}
.SpeechBalloon.type1:before {
    position:absolute;
    content:'';
    display:block;
    width:0;
    height:0;
    top:92px;
    left:116px;
    border-top:18px solid #FF54AC;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
}

.SpeechBalloon.type1 p{
    position:absolute;
    top:45px;
    left:20px;
    width:225px;
    color:#fff;
    font-size:14px;
    text-align:center;
}
/*
 * SpeechBalloon Type2
 */
.SpeechBalloon.type2 {
    margin:0 auto 0;
    left:-75px;
    margin-bottom:15px;
    width:100px;
    height:100px;
    border-radius:50px;
    -moz-border-radius:50px;
    background:#FF54AC;
    -webkit-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
    -moz-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
}
.SpeechBalloon.type2:before {
    position:absolute;
    content:'';
    display:block;
    width:20px;
    height:20px;
    border-radius:10px;
    -moz-border-radius:10px;
    top:85px;
    left:215px;
    background:#FF54AC;
}
.SpeechBalloon.type2:after {
    position:absolute;
    content:'';
    display:block;
    width:10px;
    height:10px;
    border-radius:5px;
    -moz-border-radius:5px;
    top:105px;
    left:230px;
    background:#FF54AC;
}

.SpeechBalloon.type2 p{
    position:absolute;
    top:45px;
    left:20px;
    width:225px;
    color:#fff;
    font-size:14px;
    text-align:center;
}
/*
 * SpeechBalloon Type3
 */
.SpeechBalloon.type3 {
    top:25px;
    margin:30px auto 100px;
    left:-75px;
    width:50px;
    height:50px;
    border-radius:25px;
    -moz-border-radius:25px;
    background:#FFF;
    -webkit-box-shadow:
        25px -20px 0 #FFF,
        50px -30px 0 #FFF,
        75px -35px 0 #FFF,
        100px -30px 0 #FFF,
        125px -20px 0 #FFF,
        150px 0px 0 #FFF,
        25px 20px 0 #FFF,
        50px 30px 0 #FFF,
        75px 35px 0 #FFF,
        100px 30px 0 #FFF,
        125px 25px 0 #FFF,
        60px 0px 0 #FFF,
        100px 0px 0 #FFF
    ;
    -moz-box-shadow:
        25px -20px 0 #FFF,
        50px -30px 0 #FFF,
        75px -35px 0 #FFF,
        100px -30px 0 #FFF,
        125px -20px 0 #FFF,
        150px 0px 0 #FFF,
        25px 20px 0 #FFF,
        50px 30px 0 #FFF,
        75px 35px 0 #FFF,
        100px 30px 0 #FFF,
        125px 25px 0 #FFF,
        60px 0px 0 #FFF,
        100px 0px 0 #FFF
    ;
}
.SpeechBalloon.type3:before {
    position:relative;
    content:'';
    display:block;
    top:-5px;
    left:-5px;
    width:60px;
    height:60px;
    border-radius:30px;
    -moz-border-radius:30px;
    background:#FF54AC;
    z-index:-1;
    -webkit-box-shadow:
        25px -20px 0 #FF54AC,
        50px -30px 0 #FF54AC,
        75px -35px 0 #FF54AC,
        100px -30px 0 #FF54AC,
        125px -20px 0 #FF54AC,
        150px 0px 0 #FF54AC,
        25px 20px 0 #FF54AC,
        50px 30px 0 #FF54AC,
        75px 35px 0 #FF54AC,
        100px 30px 0 #FF54AC,
        125px 25px 0 #FF54AC,
        60px 0px 0 #FF54AC,
        100px 0px 0 #FF54AC
    ;
    -moz-box-shadow:
        25px -20px 0 #FF54AC,
        50px -30px 0 #FF54AC,
        75px -35px 0 #FF54AC,
        100px -30px 0 #FF54AC,
        125px -20px 0 #FF54AC,
        150px 0px 0 #FF54AC,
        25px 20px 0 #FF54AC,
        50px 30px 0 #FF54AC,
        75px 35px 0 #FF54AC,
        100px 30px 0 #FF54AC,
        125px 25px 0 #FF54AC,
        60px 0px 0 #FF54AC,
        100px 0px 0 #FF54AC
    ;
}
.SpeechBalloon.type3:after {
    position:absolute;
    top:80px;
    left:97px;
    content:'';
    display:block;
    width:8px;
    height:8px;
    position:absolute;
    background:#fff;
    z-index:2;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:4px 4px 0 #FF54AC;
    -moz-transform:rotate(45deg);
    -moz-box-shadow:4px 4px 0 #FF54AC;
}
.SpeechBalloon.type3 p{
    position:absolute;
    top:20px;
    left:20px;
    width:175px;
    color:#FF54AC;
    font-size:14px;
    text-align:center;
}

/*
 * SpeechBalloon Type4
 */
.SpeechBalloon.type4 {
  width:170px;
  height:120px;
  margin:0 auto 20px;
}
.SpeechBalloon.type4:before {
  position:absolute;
  top:60px;
  left:-15px;
  content:'❤';
  display:block;
  width:0px;
  height:0px;
  line-height:0;
  font-size:200px;
  color:#FFF;
}
.SpeechBalloon.type4:after {
  position:absolute;
  top:60px;
  left:-25px;
  content:'❤';
  display:block;
  width:0px;
  height:0px;
  line-height:0;
  font-size:220px;
  color:#FF54AC;
  z-index:-1;
}

.SpeechBalloon.type4 p {
  position:relative;
  z-index:2;
  width:170px;
  height:120px;
  color:#FF54AC;
  line-height:120px;
  text-align:center;
}

/*
 * SpeechBalloon Type5
 */
.SpeechBalloon.type5 {
    position:relative;
    left:4px;
    width:150px;
    height:100px;
    margin:60px auto 100px;
    background:#FFF;
}
.SpeechBalloon.type5:before {
    position:absolute;
    top:-25px;
    left:-25px;
    content:'';
    display:block;
    width:50px;
    height:50px;
    background:#FFF;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:
        134px -66px 0 #FFF,
        170px -30px 0 #FFF,
        140px 0px 0 #FFF,
        100px 40px 0 #FFF,
        100px -100px 0 #FFF,
        70px -70px 0 #FFF,
        30px -30px 0 #FFF,
        36px 36px 0 #FFF,
        71px 71px 0 #FFF
    ;
}
.SpeechBalloon.type5:after {
    position:absolute;
    top:-30px;
    left:-30px;
    content:'';
    display:block;
    width:60px;
    height:60px;
    background:#FF54AC;
    z-index:-1;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:
        134px -66px 0 #FF54AC,
        170px -30px 0 #FF54AC,
        140px 0px 0 #FF54AC,
        100px 40px 0 #FF54AC,
        100px -100px 0 #FF54AC,
        70px -70px 0 #FF54AC,
        30px -30px 0 #FF54AC,
        36px 36px 0 #FF54AC,
        71px 71px 0 #FF54AC
    ;
}
.SpeechBalloon.type5 p {
    position:relative;
    z-index:2;
    height:100px;
    font-size:14px;
    line-height:100px;
    color:#FF54AC;
    text-align:center;
}

全部かわいいのはwebkitだけ！ハート型はハート文字を使っているので環境によっては綺麗に出ないと思う。ブログに転載：http://t.co/sZNv8p1<div class="SpeechBalloon type1"> <p>かわいいはつくれりゅ！</p> </div> <div class="SpeechBalloon type2"> <p>かわいいはつくれりゅ！</p> </div> <div class="SpeechBalloon type3"> <p>かわいいはつくれりゅ！</p> </div> <div class="SpeechBalloon type4"> <p>かわいいはつくれりゅ！</p> </div> <div class="SpeechBalloon type5"> <p>かわいいはつくれりゅ！</p> </div> /* * SpeechBalloon */ .SpeechBalloon{ position:relative; } .SpeechBalloon p{font-size:12px;} /* * SpeechBalloon Type1 */ .SpeechBalloon.type1 { margin:0 auto 20px; left:-75px; width:100px; height:100px; background:#FF54AC; border-radius:50px; -moz-border-radius:50px; -webkit-box-shadow: 50px 0 0 #FF54AC, 100px 0 0 #FF54AC, 150px 0 0 #FF54AC ; -moz-box-shadow: 50px 0 0 #FF54AC, 100px 0 0 #FF54AC, 150px 0 0 #FF54AC ; } .SpeechBalloon.type1:before { position:absolute; content:''; display:block; width:0; height:0; top:92px; left:116px; border-top:18px solid #FF54AC; border-left:8px solid transparent; border-right:8px solid transparent; } .SpeechBalloon.type1 p{ position:absolute; top:45px; left:20px; width:225px; color:#fff; font-size:14px; text-align:center; } /* * SpeechBalloon Type2 */ .SpeechBalloon.type2 { margin:0 auto 0; left:-75px; margin-bottom:15px; width:100px; height:100px; border-radius:50px; -moz-border-radius:50px; background:#FF54AC; -webkit-box-shadow: 50px 0 0 #FF54AC, 100px 0 0 #FF54AC, 150px 0 0 #FF54AC ; -moz-box-shadow: 50px 0 0 #FF54AC, 100px 0 0 #FF54AC, 150px 0 0 #FF54AC ; } .SpeechBalloon.type2:before { position:absolute; content:''; display:block; width:20px; height:20px; border-radius:10px; -moz-border-radius:10px; top:85px; left:215px; background:#FF54AC; } .SpeechBalloon.type2:after { position:absolute; content:''; display:block; width:10px; height:10px; border-radius:5px; -moz-border-radius:5px; top:105px; left:230px; background:#FF54AC; } .SpeechBalloon.type2 p{ position:absolute; top:45px; left:20px; width:225px; color:#fff; font-size:14px; text-align:center; } /* * SpeechBalloon Type3 */ .SpeechBalloon.type3 { top:25px; margin:30px auto 100px; left:-75px; width:50px; height:50px; border-radius:25px; -moz-border-radius:25px; background:#FFF; -webkit-box-shadow: 25px -20px 0 #FFF, 50px -30px 0 #FFF, 75px -35px 0 #FFF, 100px -30px 0 #FFF, 125px -20px 0 #FFF, 150px 0px 0 #FFF, 25px 20px 0 #FFF, 50px 30px 0 #FFF, 75px 35px 0 #FFF, 100px 30px 0 #FFF, 125px 25px 0 #FFF, 60px 0px 0 #FFF, 100px 0px 0 #FFF ; -moz-box-shadow: 25px -20px 0 #FFF, 50px -30px 0 #FFF, 75px -35px 0 #FFF, 100px -30px 0 #FFF, 125px -20px 0 #FFF, 150px 0px 0 #FFF, 25px 20px 0 #FFF, 50px 30px 0 #FFF, 75px 35px 0 #FFF, 100px 30px 0 #FFF, 125px 25px 0 #FFF, 60px 0px 0 #FFF, 100px 0px 0 #FFF ; } .SpeechBalloon.type3:before { position:relative; content:''; display:block; top:-5px; left:-5px; width:60px; height:60px; border-radius:30px; -moz-border-radius:30px; background:#FF54AC; z-index:-1; -webkit-box-shadow: 25px -20px 0 #FF54AC, 50px -30px 0 #FF54AC, 75px -35px 0 #FF54AC, 100px -30px 0 #FF54AC, 125px -20px 0 #FF54AC, 150px 0px 0 #FF54AC, 25px 20px 0 #FF54AC, 50px 30px 0 #FF54AC, 75px 35px 0 #FF54AC, 100px 30px 0 #FF54AC, 125px 25px 0 #FF54AC, 60px 0px 0 #FF54AC, 100px 0px 0 #FF54AC ; -moz-box-shadow: 25px -20px 0 #FF54AC, 50px -30px 0 #FF54AC, 75px -35px 0 #FF54AC, 100px -30px 0 #FF54AC, 125px -20px 0 #FF54AC, 150px 0px 0 #FF54AC, 25px 20px 0 #FF54AC, 50px 30px 0 #FF54AC, 75px 35px 0 #FF54AC, 100px 30px 0 #FF54AC, 125px 25px 0 #FF54AC, 60px 0px 0 #FF54AC, 100px 0px 0 #FF54AC ; } .SpeechBalloon.type3:after { position:absolute; top:80px; left:97px; content:''; display:block; width:8px; height:8px; position:absolute; background:#fff; z-index:2; -webkit-transform:rotate(45deg); -webkit-box-shadow:4px 4px 0 #FF54AC; -moz-transform:rotate(45deg); -moz-box-shadow:4px 4px 0 #FF54AC; } .SpeechBalloon.type3 p{ position:absolute; top:20px; left:20px; width:175px; color:#FF54AC; font-size:14px; text-align:center; } /* * SpeechBalloon Type4 */ .SpeechBalloon.type4 { width:170px; height:120px; margin:0 auto 20px; } .SpeechBalloon.type4:before { position:absolute; top:60px; left:-15px; content:'❤'; display:block; width:0px; height:0px; line-height:0; font-size:200px; color:#FFF; } .SpeechBalloon.type4:after { position:absolute; top:60px; left:-25px; content:'❤'; display:block; width:0px; height:0px; line-height:0; font-size:220px; color:#FF54AC; z-index:-1; } .SpeechBalloon.type4 p { position:relative; z-index:2; width:170px; height:120px; color:#FF54AC; line-height:120px; text-align:center; } /* * SpeechBalloon Type5 */ .SpeechBalloon.type5 { position:relative; left:4px; width:150px; height:100px; margin:60px auto 100px; background:#FFF; } .SpeechBalloon.type5:before { position:absolute; top:-25px; left:-25px; content:''; display:block; width:50px; height:50px; background:#FFF; -webkit-transform:rotate(45deg); -webkit-box-shadow: 134px -66px 0 #FFF, 170px -30px 0 #FFF, 140px 0px 0 #FFF, 100px 40px 0 #FFF, 100px -100px 0 #FFF, 70px -70px 0 #FFF, 30px -30px 0 #FFF, 36px 36px 0 #FFF, 71px 71px 0 #FFF ; } .SpeechBalloon.type5:after { position:absolute; top:-30px; left:-30px; content:''; display:block; width:60px; height:60px; background:#FF54AC; z-index:-1; -webkit-transform:rotate(45deg); -webkit-box-shadow: 134px -66px 0 #FF54AC, 170px -30px 0 #FF54AC, 140px 0px 0 #FF54AC, 100px 40px 0 #FF54AC, 100px -100px 0 #FF54AC, 70px -70px 0 #FF54AC, 30px -30px 0 #FF54AC, 36px 36px 0 #FF54AC, 71px 71px 0 #FF54AC ; } .SpeechBalloon.type5 p { position:relative; z-index:2; height:100px; font-size:14px; line-height:100px; color:#FF54AC; text-align:center; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/fOSh/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/GeckoTang/fOSh" title="かわいいふきだし">かわいいふきだし - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code