CSSのお勉強第2回目 〜思考吹き出し〜

おはようございます、こんにちは、こんばんは。ハルクマです。

ついに2回目、1回だけで終わらずに済みそうでよかったです。

前回やった会話吹き出しに関しても、おそらくもっと綺麗に作れるんだろうなーとか思いながらやっているのですが、やはりそこはまだまだ勉強不足、もっと数を稼がないといけないなと思います。がんばろう。

さて、前置きはこれくらいにして新しく作っていきたいと思います。

第2回目は考え事吹き出しを作ってみました。

ファミチキください
こいつ直接脳内に・・・!

ネタとしてはだいぶ古いですが、頭の中で考えてる様子を書くことができます。(注文受ける方って口に言葉出してたきがする)

需要はそこそこあるんじゃないかな?と思います。とりあえずhtmlをぺたり。

<div class="balloon">
    <div class="faceicon_left"></div>
    <div class="think_left">ファミチキください</div>
</div>
<div class="balloon">
    <div class="faceicon_right"></div>
    <div class="think_right">こいつ直接脳内に・・・!</div>
</div>

次にCSSぺたり。

.balloon{
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}
.faceicon_left{
    float: left;
    margin-right: -90px;
    width: 80px;
    height: 80px;
    background-image:url(../hiyoko.png);
    border-color: #d9cbff;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 100%;
    border: solid 3px;
}
.faceicon_right{
    float: right;
    width: 80px;
    height: 80px;
    background-image:url(../nezumi.png);
    border-color: #b3ddff;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 100%;
    border: solid 3px;
}
.think_left{
    max-width: 75%;
    display: inline-block;
    position: relative;
    margin: 5px 0 0 128px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #d9cbff;
}
.think_left:before
{
    content: "";
    position: absolute;
    left: -38px;
    bottom: 0px;
    width: 13px;
    height: 12px;
    background: #b7a9dd;
    border-radius: 50%;
}
.think_left:after
{
    content: "";
    position: absolute;
    left: -24px;
    bottom: 3px;
    width: 20px;
    height: 18px;
    background: #c8baee;
    border-radius: 50%;
}
.think_right{
    float: right;
    max-width: 75%;
    display: inline-block;
    position: relative;
    margin: 5px 44px 0 0px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #b3ddff;
}
.think_right:before
{
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0px;
    right: -38px;
    width: 13px;
    height: 12px;
    background: #91bbdd;
    border-radius: 50%;
}
.think_right:after
{
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 3px;
    right: -24px;
    width: 20px;
    height: 18px;
    background: #a2ccee;
    border-radius: 50%;
}

はい、前回の会話吹き出しとあまりかわりません。共通部分があるので、両方使う場合にはうまくまとめることも可能です。
考えの泡?のようなやつもそれぞれ色を変えれますので、前回の吹き出しの矢印の色と同様に立体感を出すことも可能です。

ソースを打ってて思ったのですが、綺麗にまとまったときはすごく気持ちいいですね・・・また作りたいと思います、すでにネタ切れですが。(ダメなやつ

今回はこの辺で。

関連記事

  1. CSSのお勉強第3回目 〜怒りマーク〜

  2. CSSのお勉強第1回目 〜会話吹き出し〜

プライバシーポリシー