1. TOP
  2. デザイン
  3. CSSのみで作る吹き出し。レスポンシブにも対応しててコピペでOK。

CSSのみで作る吹き出し。レスポンシブにも対応しててコピペでOK。

 2018/12/06 デザイン
CSS
この記事は約 7 分で読めます。 1,388 Views

デザインのエレメントとして吹き出しはよく使いますよね。

今回はレスポンシブ対応のシンプルで使いやすい吹き出しを、そのままコピペで使えるようにしました。

必要に応じて、フォントサイズや背景、幅などを変更して応用してみてください。

① 基本の吹き出し

②角丸の吹き出し

①のコードにborder-radiusを足すことで角丸が表現できます。

③枠線の吹き出し

グレーの三角の上に白い三角をすこしずらして重ねることで枠を表現しています。
枠の太さを変えるときは上の白い三角(.balloon3:before)のbottomの数値も調整してください。

④角丸枠線の吹き出し

③のコードにborder-radiusを足すことで角丸が表現できます。

⑤グラデーションの吹き出し

②の背景をグラデーションに変えてもおしゃれです。グラデーションの終了色と、三角の色を揃えることでちゃんとつながって見えます。

⑥ストライプの吹き出し

repeating-linear-gradientをつかうことでグラデーションをCSSで表現できます。

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

  • コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法

関連記事

  • 【超簡単】WordPress移管プラグイン、「All-in-One WP Migration」の使い方。

  • 投稿記事や固定ページにサブタイトルを挿入できるWordPressプラグイン「WP Subtitle」の使い方

  • 魅力的で稼げるフリーランスデザイナーになるために磨くべき3つのスキル

  • 【2019年最新版】おしゃれなおすすめ日本語フリーフォント。プロのデザイナーでも使えます。

  • 経営におけるデザインの2つの役割と効果

  • おすすめのフリー欧文(英語)フォント配布サイトまとめ。おしゃれで無料!【2019年最新】