チャット風・会話デザインのCSS素材

相手の発言は cs-chat01__msg、自分の発言は cs-chat01__msg--me を付けた行です。行をコピーして増やせます。

アイコンの中は文字1字でも、<img> の顔写真やイラストでもかまいません。右側に出したい人は cs-chat02--right を付けます。

吹き出しが1つずつ届く動きです。出る順番とタイミングは各行の style="--d:…s" で決めています。「最初から」で何度でも再生できます。

左が話す吹き出し、右が考えている（もくもく）吹き出しです。線の太さは --cs-w で変えられます。

アイコンはHTMLに書いた小さなSVGの絵です。写真に変えるときは <svg> を <img src="…" alt=""> に差し替えてください。入力欄は見た目だけの飾りです。

後ろのぼんやりした色は、外側の箱に描いたグラデーションです。写真の上に置くと、吹き出しが写真を透かして見せます。