Tokyo Q Studio

Web制作・WordPress・BootStrap・DTM制作・SEO対策

CSSで会話形式のフキダシデザインを作ってみる

CSSで何処までできるのか。
吹き出しデザインのCSS版です。

ランディングとかで使えそうですね!

 

こんな感じになるようです。

引用頂きます!

 

参考サイト:AIUEO Lab2

記事:CSSで会話形式のフキダシデザインを作ってみる

 

フキダシデザインhtmlとcss

俺は男だ〜〜!

なにを〜〜、俺が男だ〜〜〜〜!!!

<div class="question_Box">
<div class="question_image">
<img class="aligncenter size-full wp-image-11310" src="http://tqs.jp/wp-content/uploads/2014/09/Image-1_21-150x1501.png" alt="" width="90" height="90" />
</div>
<div class="arrow_question">
<p>俺は男だ〜〜!</p>
</div><!-- /.arrow_question -->
</div><!-- /.question_Box -->

<div class="question_Box">
<div class="answer_image">
<img src="http://tqs.jp/wp-content/uploads/2014/09/Image-1_18-150x1501.png" alt="" width="90" height="90" class="aligncenter size-full wp-image-11277" />
</div>
<div class="arrow_answer">
<p>なにを〜〜、俺が男だ〜〜〜〜!!!</p>
</div><!-- /.arrow_answer -->
</div><!-- /.question_Box -->
/*============================================================
フキダシデザイン 
============================================================*/
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 30px 25px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;
}
.arrow_question {
    float: right;
    margin-right: 20px;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8; }
.arrow_question:before { border-right-color: #c8c8c8; }
.question_image { float: left; }
.answer_image {
    float: right;
    margin-right: 20px;
}
.answer_image img,
.question_image img { border-radius: 50px; }
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}

 

と言ったぐらいになります。

これ使えるなぁ〜〜〜w。

対話形式のcustomフィールド作っておけばショートコードでどこにでも入れれるって感じですねぇ。

非常に面白い!

 

 

早速何かに使おうっと!!

  関連記事

  • Mac初心者に絶対使って欲しいアプリ集.png
    Macを買ったら絶ッッッ対すぐに使って欲しい5つアプリとTIPS 。全部無料 | あなたのスイッチを押すブログ
    http://bamka.info/mac_beginner… 知らなかったアプリが沢山だ(笑) さて、インストするか!iPhoneから送信
  • au版iPhone5で顕著。「パケ詰まり」はなぜ起きる?
    そうそう、多いですよ~。 今度はSoftBankに変えようかと思ってます。 あと、1年4カ月後に。 iPhoneから送信 MMD 研究所が発表した、通勤・帰宅ラッシュ時におけるスマホの Web 表示時 ...
  • 「iOS 7」に欲しいもの–15の可能性を勝手に予測
    メール強化は欲しいですね。 http://japan.cnet.com/sp/busin… iPhoneから送信
  • 気球で上空3万メートルにカメラを飛ばして写真や映像を撮影できるキット「Kepler Space Kit」
    自分で撮れるってのが良さげです。 iPhoneから送信 iPadやレゴ人形、Galaxy S IIがなど、さまざまなものが成層圏まで飛ばされ、飛行の後に落下されたりしていますが、実際に上空3万メートル ...
  • アップル、最新版「Final Cut Pro X」宣伝動画を公開–ア ップデートもリリース
    終わったのかと思ったらやっぱりApple、やってくれます! http://japan.cnet.com/marketer… iPhoneから送信
  • no image
    iPhone 5Sと第5世代iPadが6月29日のスペシャルイベントで発表? – 海外報道
    iPhone5は十分イイですよ。 OSアップデートするたび重くなる感じはありますが… http://news.mynavi.jp/news/201… iPhoneから送信
  • ワンコインの神音アプリ「UBiO」
    結構音にうるさい私です。 面白そうなアプリが出ているようです… かなり気になります! http://www.gizmodo.jp/2014/04/…
  • HTML5で実現できる!環境光に合わせたレスポンシブなUI
    これ面白い記事だ! レスポンシブルで調光に合わせてバックのカラーを変えることが出来るそうだ。 未来を感じる技術ですね。 http://html5experts.jp/girlie_…
  • Vintage Scene
    プロモーションを利用するには、AppStore で”本日のアプリ”アプリをダウンロード。”本日のアプリ”とは? これは、通常は有料のiPhoneアプリを ...
  • iOSアプリ風デザイン「UIAppearance」を使ってスタイルシート的なワークフロー
    スマホのUIデザインのプロトタイプツール。 流行っていると言われれば兎に角使ってみたいw。 https://codeiq.jp/magazine/201…