Speech & Thought Bubbles - CSS3 Demos | Grains of Sand

CSS3 Demos - Speech & Thought Bubbles

Use CSS3 border-radius, gradients and shadows, together the :before and :after pseudo elements, to create speech and thought bubbles with no need for images.

Basic Speech Bubble

A basic speech bubble using only CSS to create the bubble and the triangle

HTML

A basic speech bubble using only CSS to create the bubble and the triangle

CSS

/****CREATE THE BUBBLE****/
p.basic1{
position: relative; /*see the support section below for more info*/
width: 300px; /*width of the speech bubble*/
margin-bottom: 30px; /*must be at least the size the triangle we're going to create below*/
/**add a curve to the corners**/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/**Give the background a gradient**/
background: #c49bc4; /*required for browsers that don't support gradients*/
background: -webkit-linear-gradient(#7e527f, #c49bc4);
background: -moz-linear-gradient(#7e527f, #c49bc4);
background: -o-linear-gradient(#7e527f, #c49bc4);
background: linear-gradient(#7e527f, #c49bc4);
-pie-background: linear-gradient (#7e527f, #c49bc4); /*use CSS3Pie to make the gradient work in IE9 and lower*/
behavior: url(folder/PIE.htc); /*location of PIE.htc on your server*/
}

/*****CREATE THE TRIANGLE*****/
p.basic1:after {
content: "";
position: absolute; /*see the support section below for more info*/
left: 50px; /*position of the triangle from the left edge of the bubble*/
border-width: 25px 25px 0 25px; /*size of the triangle*/
bottom: -25px; /*negative value of the top border width */
border-style: solid;
border-color: #c49bc4 transparent; /*same colour as the lower of the bubble's gradient*/
}

Outline Speech Bubble

Another basic bubble - this time a transparent bubble and triangle, defined by a border

HTML

Another basic bubble - this time a transparent bubble and triangle, defined by a border

CSS

/***** FIRST CREATE THE BUBBLE ****/
p.border {
position:relative; /*see the support section below for more info*/
width:400px; /*size of the bubble*/
background:#fff; /*same as the container background*/
padding:15px;
margin:20px 0 40px 40px;
color:#333;
/*add the bubble outline*/
border:10px solid #7e527f;
/*give the bubble curved corners*/
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
}

/***** CREATE THE TRIANGLE *****/
p.border:before {
content:"";
position:absolute; /*see the support section below for more info*/
bottom:-35px; /* value = -(border-top-width) - (border-bottom-width) in this case -(35px - 0px)= -35px*/
left:30px; /*horizontal position of the triangle*/
border-width:35px 35px 0 35px; /*size of the traingle*/
border-style:solid;
border-color: #7e527f transparent; /*colour should be the same as bubble border set above*/
display:block;
}

/*****FINALLY MAKE THE CENTRE OF THE TRIANGLE TRANPARENT****/
p.border:after {
content:"";
position:absolute; /*see the support section below for more info*/
bottom:-20px; /* value = -(border-top-width - border-bottom-width) */
left:45px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:20px 20px 0 20px;
border-style:solid;
border-color:#fff transparent; /*colour should be the same as the container background*/
display:block;
}

Thought Bubble

This is a thought bubble made with CSS3.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies egestas lacus nec pharetra. Etiam porttitor suscipit iaculis.

HTML

This is a thought bubble made with CSS3. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies egestas lacus nec pharetra. Etiam porttitor suscipit iaculis.

CSS

/****** FIRST CREATE THE BUBBLE *****/
p.thought {
position:relative; /*see the support section below for more info*/
width:400px; /*size of the bubble*/
padding:20px 40px;
margin:10px 10px 80px 40px;
/**give the bubble's background a gradient**/
background:#f7a944; /*fallback colour for non-supporting browsers*/
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fac868), to(#f3961c));
background:-moz-linear-gradient(#fac868, #f3961c);
background:-o-linear-gradient(#fac868, #f3961c);
background:linear-gradient(#fac868, #f3961c);
/**give the corners a large curve**/
-webkit-border-radius:180px;
-moz-border-radius:180px;
border-radius:180px;
/**add a drop shadow to the bubble**/
-webkit-box-shadow: -3px 4px 8px #989898;
-moz-box-shadow: -3px 4px 8px #989898;
box-shadow: -3px 4px 8px #989898;
/**style the text**/
color:#575544;
font-size:1em;
letter-spacing:.06em;
}

/******NOW CREATE THE THOUGHT CIRCLES*****/
/****FIRST THE LARGE CIRCLE***/
p.thought:before {
content:"";
position:absolute; /*see the support section below for more info*/
bottom:-40px; /*distance from the bottom of the bubble*/
left:20px; /*distance from the left edge of the bubble*/
background:#f3961c;
width:30px; /*same as the height*/
height:30px; /*same as the width*/
/*add a curve to the corners the same size as the height and width*/
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
/*add a drop shadow*/
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}
/*****NOW THE SMALL CIRCLE***/
/**Created exactly the same way as the large circle, except with smaller width, height and border-radius**/
p.thought:after {
content:"";
position:absolute;
bottom:-55px;
left:0;
width:15px;
height:15px;
background:#f3961c;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}

Speech Bubble With Author's Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacus vitae quam dictum fermentum. Integer feugiat lacinia nunc, sit amet iaculis nibh vulputate at

author's name

HTML

<blockquote class="quote">
Quote goes in here.....
</blockquote>
author's name

CSS

/*******FIRST CREATE THE BUBBLE - this is done in the same way as the examples above******/
blockquote.quote {
position:relative; /*see the support section below for more info*/
width:400px; /*size of the bubble*/
padding:20px;
margin:20px 0 30px 40px;
color:#f6edf6
/**Give the corners a curve **/
-webkit-border-radius:30px /60px;
-moz-border-radius:30px /60px;
border-radius:30px /60px; /* the second value, preceded by a / defines the vertical radius*/
/**Add a gradient to the background of the bubble**/
background:#c49bc4; /*required for browsers that don't support gradients*/
background:-webkit-gradient(#7e527f, #c49bc4);
background:-moz-linear-gradient(#7e527f, #c49bc4);
background:-o-linear-gradient(#7e527f, #c49bc4);
background:linear-gradient(#7e527f, #c49bc4);
}

/*****NOW CREATE THE TRIANGLE*****/
/**because this is an obtuse triangle we'll create it in two sections**/
/**First the coloured section that you see as the triangle**/
blockquote.quote:before {
content:"";
position:absolute; /*see the support section below for more info*/
bottom:-30px; /*height of the triangle*/
right:80px; /*distance from the right edge of the bubble*/
border-width:0 0 30px 60px; /*3rd value is height of the triangle and must be same as bottom*/
border-style:solid;
border-color:transparent #c49bc4; /*colour of the triangle*/
}
/**Now the transparent section that's the same colour as the container background**/
blockquote.quote:after {
content:"";
position:absolute; /*see the support section below for more info*/
bottom:-30px; /*height of the triangle, same as the bottom value in :before*/
right:115px; /* = (right set above in :before) + (forth value of border-width) so here 80px + 35px */
border-width:0 0 30px 35px; /*3rd value is height of the triangle and must be same as bottom*/
border-style:solid;
border-color:transparent #fffdf7; /*background colour of the container*/
}

/******FINALLY POSITION & SYTLE THE AUTHOR'S NAME TEXT*****/
blockquote.quote + p {
margin-top:-30px;
padding-left:260px;
font-style:italic;
letter-spacing:-1px;
}

Support Section

Postioning

The demo uses postition:absolute together with position:relative, so here's a brief explanation...
position:relative -- lets you position an object relative to its normal position, using top, bottom, left and right
position:absolute -- removes an object from the normal flow and positions it exactly where you say on the page
position:relative with position:absolute -- lets you position a child element inside its parent. If you don't first use position:relative on the parent element, the absolutely positioned child will move outside the parent.

See a further explanation and example of using relative and absolute positioning together.

Explanations Of The CSS3 Used In The Demo

Browser Support

The demo works in all the latest browsers, including IE9. IE8 works with the help of CSS3Pie, apart from the thought bubble which will have squares instead of circles as CSS3Pie doesn't work with :after and :before.

More CSS3 Demos This Way