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さんの
おすすめ

3

/

19

2024

Googleさんの
おすすめ

3

/

19

2024

デザインの記事

HAKUTAI WEDDING
増量計画
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える