LINE風の吹き出しの会話をCSSで作ってみる

LINE風の吹き出しの会話をCSSで作ってみる

CSSだけで、LINE風の吹き出しの会話を作ってみました。
何かとよく使います。
やはりレスポンシブにコーディングするのは難しいですね。
シンプルに疑似要素の「:before」「:after」を使ってコーディングしています。
角丸はborder-radiusで調整。
参考になればと思います。

なんだかむずかしそうですねー
吹き出し部分にこだわらなかったら結構簡単にできますよー

シンプル版

See the Pen LINE風の吹き出しの会話をつくる、シンプル版 by 125naroom (@125naroom) on CodePen.

三角の部分をちょっと曲げて素敵にしてみる

See the Pen LINE風の吹き出しの会話をつくる、三角の部分をちょっと曲げて素敵にしてみる by 125naroom (@125naroom) on CodePen.

三角の部分をちょっと曲げて素敵にしてみる、動きもつけてみる

See the Pen LINE風の吹き出しの会話をつくる、三角の部分をちょっと曲げて素敵にしてみる、動きもつけてみる by 125naroom (@125naroom) on CodePen.

ふきだしをつくるのに便利なサイトさん

ベースは下記のサイトさんで作るのはいいかと思います。
仕組みがわかればオリジナルのコーディングを。

さいごに

パンおいしいですねー
おいしそうですねー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

5

/

22

2024

Googleさんの
おすすめ

5

/

22

2024

デザインの記事

UNBOX 2nd
  • 2024.05.20New
  • UNBOX 2nd
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
早朝始発の殺風景