CSS only speech bubbles
11th March 2007
A simple CSS only method of adding a little style to your comments. This uses 5 images per 'bubble' which can be easily customized to have any background color.
Speech bubble with left pointer
Speech bubble with mid-left pointer
Speech bubble with mid-right pointer
The positioning of the pointer can easily be adjusted by changing one value in the stylesheet.
Speech bubble with right pointer
copyright © stu nicholls - CSS play
This works in IE5.5, IE6, IE7, Firefox, Opera and should be ok in all Safari browsers. IE5.01 doesn't quite make it and has a one pixel error in working out the zero top margin of the paragraph element.
The images used are as follows.
- Top left 1
- Top left 2
- Top left 3
- Top left 4
- Top right 1
- Top right 2
- Top right 3
- Top right 4
- Bottom left 1
- Bottom left 2
- Bottom left 3
- Bottom left 4
- Bottom right 1
- Bottom right 2
- Bottom right 3
- Bottom right 4
- Pointer 1
- Pointer 2
- Pointer 3
- Pointer 4
If you would like speech bubbles with no images then I have a demonstration here bubbles with no images.
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.