CSS3 Demos - Speech Bubble
You can use CSS3 to create speech bubbles with no need for any images.
Tested as working in Opera 11, Firefox 5, Chrome & Safari 5. It can be mostly made to work in Internet Explorer with CSS3Pie.
Speech Bubbles
A basic speech bubble using only CSS to create the bubble and the triangle
Code
HTML
- <p class="basic1">A basic speech bubble using only CSS to create the bubble and the triangle</p>
CSS
- /* Create the bubble */
p.basic1{
position: relative;
width: 400px;
padding: 15px;
color: #f6edf6;
border-radius: 15px; /*change depending on how much of a curve you want on the borders*/
background: #c49bc4; /*required for browsers that don't support gradients*/
/*give the background a gradient*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#7e527f), to(#c49bc4));
background: -moz-linear-gradient(#7e527f, #c49bc4);
background: -o-linear-gradient(#7e527f, #c49bc4);
background: linear-gradient(#7e527f, #c49bc4);
}- /* Create the triangle */
p.basic1:after{
content: "";
position: absolute;
left: 50px; /*position of the triangle on the bubble*/
border-width: 25px 25px 0 25px; /*size of the triangle, the bottom needs to be 0*/
bottom: -25px; /*negative value of the top border width*/
border-style: solid;
border-color: #c49bc4 transparent; /*same as the lower colour of the bubble gradient*/
}Another basic bubble, this time a transparent bubble and triangle defined by a border
Code
HTML
- <p class="border">Another basic bubble, this time a transparent bubble and triangle defined by a border</p>
CSS
- /* Create the bubble */
p.border {
position: relative;
width: 400px;
background: #fff; /*same colour as the containing element's background*/
padding: 15px;
border-radius: 15px; /*change depending on how much of a curve you want on the borders*/
border: 5px solid #7e527f;
color: #333;
}- /* Create the 'transparent' triangle */
p.border:after{
content: "";
position: absolute;
left: 45px; /* :before left + :before border-left - :after border-left */
border-width: 20px 20px 0 20px;
bottom: -20px; /*negative value of the top border width*/
border-style: solid;
border-color: #fff /*same colour as the containing element's background*/ transparent;
}- /* Create the triangle border */
p.border:before{
content: "";
position: absolute;
left: 30px; /*position of the triangle on the bubble*/
border-width: 35px 35px 0 35px; /*size of the triangle, the bottom needs to be 0*/
bottom: -35px; /*negative value of the top border width*/
border-style: solid;
border-color: #7e527f transparent; /*same colour as the bubble's border*/
}
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.Code
HTML
- <p class="thought">This is a thought bubble made with CSS3.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies egestas lacus nec pharetra. Etiam porttitor suscipit iaculis.</p>CSS
- /* First create the bubble */
p.thought {
position: relative;
width: 400px;
padding: 20px 40px;
border-radius: 180px;
box-shadow: -3px 4px 8px #989898;
/*give the background a gradient*/
background: #f7a944; /*for browsers that don't support gradient*/
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);
/*help Internet Explorer*/
behavior: url(assets/PIE/PIE.htc);
}- /* Next create the larger thought bubble */
p.thought:before {
content: "";
position: absolute;
background: #f3961c; /*normally the colour of the lower gradient in the speech bubble*/
bottom: -40px; /*distance below the speech bubble*/
left: 20px; /*horizontal position*/
width: 30px;
height: 30px;
border-radius: 30px; /*same as width & height to create a circle*/
box-shadow: -3px 3px 8px #989898;
}- /* Finally create the smaller thought bubble */
p.thought:after {
content: "";
position: absolute;
background: #f3961c; /*normally the colour of the lower gradient in the speech bubble*/
bottom: -55px; /*distance below speech bubble, at least [:before bottom] + [:after height]*/
left: 0; /*horizontal position*/
width: 15px;
height: 15px;
border-radius: 15px; /*same as width & height to create a circle*/
box-shadow: -3px 3px 8px #989898;
}- /*See the foot of the page for browser specific prefixes for border-radius and box-shadow*/
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
Code
HTML
- <blockquote class="quote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies egestas lacus nec pharetra. Etiam porttitor suscipit iaculis.</p>
</blockquote>- <p>author's name</p>
CSS
- /* First create the bubble (this is the same as the first example above) */
blockquote.quote{
position: relative;
width: 400px;
padding: 15px;
color: #f6edf6;
border-radius: 15px; /*change depending on how much of a curve you want on the borders*/
background: #c49bc4; /*required for browsers that don't support gradients*/
/*give the background a gradient*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#7e527f), to(#c49bc4));
background: -moz-linear-gradient(#7e527f, #c49bc4);
background: -o-linear-gradient(#7e527f, #c49bc4);
background: linear-gradient(#7e527f, #c49bc4);
}- /* Next create the triangle */
blockquote.quote:before {
content: "";
position: absolute;
right: 80px; /*horizontal position of the triangle*/
border-width: 0 0 40px 70px;
border-style: solid;
border-color: transparent #c49bc4; /*same colour the lower gradient*/
bottom: -40px; /*negative value of the border's bottom width*/
}- /* Then add second triangle to make the first appear obtuse*/
blockquote.quote:after {
content: "";
position: absolute;
right: 115px; /*[:before right] + [:after left border-width]*/
border-width: 0 0 40px 35px; /*bottom = :before bottom border-width; left half :before left border-width*/
border-style: solid;
border-color:transparent #fffdf7; /*same colour as containing element background*/
bottom: -40px; /*negative value of the border's bottom width*/
}- /* Finally position the author's name */
blockquote.quote + p {
margin-top: -25px; /*pull the text up to the bubble*/
padding-left: 240px; /*move the text towards the triangle*/
font-style: italic;
letter-spacing: -1px;
}
- /*See the foot of the page for browser specific prefixes for border-radius*/
Support & Prefixes
This technique works in the latest versions of Opera, Firefox, Chrome and Safari, earlier versions may require the following prefixes. It also works in Internet Explorer 9, earlier versions can be helped with the use of CSS3Pie.
Border radius is supported by all the latest browsers, including IE9. To support older versions there are prefixes...
Mozilla browsers (Firefox): -moz-border-radius:
Webkit browsers (Chrome, Safari): -webkit-border-radius:
Presto browsers (Opera): -o-border-radius:
IE8 and earlier will require CSS3pie - http://css3pie.com/
Box shadow is supported by all the latest browsers, including IE9. To support older versions there are prefixes...
Mozilla browsers (Firefox): -moz-box-shadow:
Webkit browsers (Chrome, Safari): -webkit-box-shadow:
Presto browsers (Opera): -o-box-shadow:
IE8 and earlier will require CSS3pie
Gradient - in addition to the prefix, the code syntax differs for each browser
Webkit browsers (Chrome, Safari): background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f2f2), to(#fff));
Mozilla browsers (Firefox): background: -moz-linear-gradient(top, #f4f2f2, #fff);
Presto browsers (Opera): background: -o-linear-gradient(top, #f4f2f2, #fff);
Internet Explorer (in conjunction with CSS3Pie): -pie-background: linear-gradient(#f4f2f2, #fff); behavior: url(/PIE.htc);
CSS3 general code: background: linear-gradient(top, #f4f2f2, #fff);