CSSのみで吹出しを作る

角丸に△をくっつけただけじゃなくて 「かわいい」吹出しが作りたいなーと思ってjsdo.itで書いてみました。  
 

かわいいふきだし – jsdo.it – share JavaScript, HTML5 and CSS

 
 
つくって思ったことをメモしておきます。  
 
個人的にかわいいと思った3番目の雲のような吹出し。 htmlはなるべく少ないマークアップで組むことにしました。

</p>

<div class="SpeechBalloon type3"> 
    <p>かわいいはつくれりゅ!</p> 
</div>

<p>
弄れる要素が少ない。 (pであまり奇抜なことしたくないのでdiv,div:after,div:beforeの3つ) divを小さくしてborder-radiusで円形にして。box-shadowで形をコピーすることにしました。
.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
    ;
}
box-shadowちゃんマジ天使! 複数指定できるのでいくらでもふわふわに出来ます! 外枠がほしいので白い雲の下に一回り大きいピンク●を作る。 そしてbox-shadowでコピーコピー! 影の位置は白い雲と一緒。
.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
    ;
}
…このままじゃただの雲なので くちばし部分を作ります。 ■を作って45deg回転させて配置します。
.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;
}
pをabsoluteにして 幅等揃えて出来上がり。
.SpeechBalloon.type3 p{
    position:absolute;
    top:20px;
    left:20px;
    width:175px;
    color:#FF54AC;
    font-size:14px;
    text-align:center;
}
ソースを見たりForkしたりして触ってみるほうが分かりやすいと思います。 実用性はものすごーく低いですが、可能性にチャレンジ! もし良かったらjsdo.itでForkしていろいろ作ってみてください!


Tags: , ,

 
 
 

コメントをどうぞ