Create CSS speech bubbles
10 Bubble pointer
10 Bubble pointer
Open up your preferred image editing software – we’ve used Photoshop – and create a new file around 25×20 pixels. Create the arrow shape using the Lasso or Custom Shape tool and fill with the background colour of the speechbubble tag. Now add a stroke that is the same width and colour as the border and crop the image.
11 Background bubble
Double-click the commentator class, select Background and click Browse to locate and add the arrow image. Select no-repeat from Background-repeat and add 20 pixels to Background-position (X) and 0 to Background-position (Y). Click Positioning, set Position to relative and Placement>Top to -1 pixel.
12 Curvy corners
Border-radius is part of the CSS3 specification and currently is only supported by Firefox and Safari. Bear this in mind when designing. Add -moz-border-radius: 5px; (Firefox) and -webkit-border-radius: 5px; (Safari) to the speech bubble code via Code view and save. Now preview the speech bubble in Firefox or Safari.
13 Double up
The isolated speech bubble works perfectly well, but to appreciate how it will look when used in a reallife scenario, copy the all the code and paste directly underneath the original speech bubble. Now adjust any margins, padding, positioning, fonts etc to get the desired effect.
14 Experiment with styles
The previous steps have created a single style of speech bubble. Now it is time to experiment with the CSS to create a more personal style. Try a different colour background, different font, expand the border radius, widen the border, change the border style etc. Remember, each new style will need a new arrow image to complete the look.
Pages: 1 2
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
Seems like a nice article however, for the web version I am missing 1)a working demo (the screen prints were small and it is the web, you could make it work) and 2) it would have nice to have some confirmation of browser compatibility.
The pro of the web vs the printed magazine is that you can go beyond the definite of print.
seems like a lot of work. Tooltips and bubblues can be easily inserted using jquery.
Great article, however it would it not be just as easy to style up your blockquote rather than creating the new styles?
I agree with the point above a working demo would be very helpful. It would also be nice to see a variety of different ways that these css speech bubbles could enhance your work. Great post though!
I already have bubbles on my wp-blog, how would one go about getting alternating colors, say one dark blue bubble with light blue text and one light blue bubble with dark blue text??
Hi, thanks for this great tutorial. I test this CSS Speach Bubble on a new project and works well. I am now working on a plugin system for PHP / MSQL :)
Hi, that’s a great tut nice to see something else can be done with pure CSS
Great Post !
I enjoyed reading it…
| Web Design | Web Development | WebProject |
you have got an excellent weblog here! would you prefer to make some invite posts on my blog?
Spot on with this write-up, I really suppose this web site wants much more consideration. I?ll in all probability be once more to learn way more, thanks for that info.