CSS Talk Bubble configured by classes. Defaults to square shape, no triangle. Height is auto-adjusting to the height of the text.
This one adds a right triangle on the left, flush at the top by using .tri-right and .left-top to specify the location.
This talk-bubble uses .left-in class to show a triangle on the left slightly indented. Still a blocky square.
And now using .round we can smooth the sides down. Also uses .btm-left to show a triangle at the bottom flush to the left.
Now we add a border and it looks like a comic. Uses .border .round and .btm-left-in
Now flipped the other way and square. Uses .border and .btm-right-in
Flush to the bottom right. Uses .btm-right only.
Moving our way back up the right side indented. Uses .round and .right-in
And finally on the right flush at the top. Uses .round .border and .right-top
Now we add a border and it looks like a comic. Uses .border .round and .btm-left-in
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=”太郎さん”] 結婚してください! [/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”2.jpg” name=”花子さん”] 年収は? [/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=”太郎さん”] ・・・。 [/speech_bubble]
Production | Raha Mutisya | 1493 |
---|---|---|
Shalom Buraka | 3829 | |
Brandy Davis | 0283 | |
Sales | Claire Horne | 4827 |
Bruce Eckel | 7246 | |
Danny Zeman | 5689 |