みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

CSSで吹き出しをつくろう。

つくってみました。

html

<p class="balloon">しゃっきりぽん!</p>

css

* {
    margin: 0; padding: 0;
    font: 15px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", sans-serif; 
}

body {
    background: #f4e3f1;
}

.balloon {
    display: inline-block;
    position: relative;
    margin: 100px;
    padding: 20px;
    color: #fff;
    text-align: center;
    background: #af1c92;
    border-radius: 40px;
    -webkit-animation: flow 2s ease 0s infinite normal;
       -moz-animation: flow 2s ease 0s infinite normal;
        -ms-animation: flow 2s ease 0s infinite normal;
         -o-animation: flow 2s ease 0s infinite normal;
            animation: flow 2s ease 0s infinite normal;
}

.balloon:after {
    display: block;
    position: absolute;
    margin-left: -10px;
    bottom: -20px;
    left: 50%;
    width: 0;
    height: 0;
    border: solid transparent 10px;
    border-top: solid #af1c92 10px;
    content: "";
}

@-webkit-keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

@-moz-keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

@-ms-keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

@-o-keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

@keyframes flow {
    0%   {
        bottom: 10px;
    }
    50%  {
        bottom: 30px;
    }
    100% {
        bottom: 10px;
    }
}

ちょっとした解説

吹き出しの大きさをテキストの長さに合わせるためにはインライン要素にする必要が、
吹き出しにafter要素で▼をつけるためにはブロック要素にする必要があったため、
balloonクラスはインラインブロック要素にしてみました。時代はハイブリッドですね。(?)

あとは、border-radiusで角丸にしてCSSアニメーションでふわふわ感をアップさせてみた次第です。はい。