CSSで作る吹き出し12パターン｜アド･エータイプ スタッフブログ

ホームページ制作で吹き出しを使ったデザインを作成することがあります。 備忘録がてらサンプルをいくつか作成したので、CSSで作る吹き出し12パターンをまとめてご紹介します。 CSSで作る吹き出しのメリットとデメリット CSSで作るメリット 画像を使わないのでデザインの変更が楽にできる 中に入れるテキストの長さを自由に変更できる スマホ対応が楽にできる Retinaディスプレイでも綺麗に見える CSSで作るデメリット ブラウザによってレンダリングに差が出る場合がある 特になんの処理もしていない場合、IE8以下は角丸が使用できないのでちゃんと表示されません。 用途に合わせて使用してみてください。 吹き出しサンプル 「枠線ありの吹き出し」と「枠線なしの吹き出し」は汎用性が高そうなので1つずつサンプルを用意しました。 枠線ありの吹き出し その1 その2 その3 その4 枠線を作る場合三角の部分を2つ

[momijitan]

参考にした！[CSS][webデザイン]

[inomonta]

これ便利そうなので保存