I wanted to create some pretty ‘speech bubble’ testimonials for a website I’m working one. In the past I’ve always used images along with extra HTML markup to create bubble testimonials with large quotation marks inside.
It worked fine enough and I could roughly reuse the same code and images over again for different projects but I knew there would be a cleaner more efficient way to do it using purely CSS, so I’ve decided to upgrade my method and share it.
It uses the :before and :after pseudo-elements, along with some simple CSS3 properties to polish it off.
Here is what we are creating:
View demo on Dabblet (best way to view and copy the code)
The Markup:
<blockquote class="testimonial"> <p>You don’t need to see his identification. These aren’t the droids you’re looking for. He can go about his business. Move along.</p> </blockquote> <div class="arrow-down"></div> <p class="testimonial-author">Obi-Wan Kenobi | <span>Jedi Master</span></p>
The CSS
.testimonial {
margin: 0;
background: #B7EDFF;
padding: 10px 50px;
position: relative;
font-family: Georgia, serif;
color: #666;
border-radius: 5px;
font-style: italic;
text-shadow: 0 1px 0 #ECFBFF;
background-image: linear-gradient(#CEF3FF, #B7EDFF);
}
.testimonial:before, .testimonial:after {
content: "\201C";
position: absolute;
font-size: 80px;
line-height: 1;
color: #999;
font-style: normal;
}
.testimonial:before {
top: 0;
left: 10px;
}
.testimonial:after {
content: "\201D";
right: 10px;
bottom: -0.5em;
}
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #B7EDFF;
margin: 0 0 0 25px;
}
.testimonial-author {
margin: 0 0 0 25px;
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-align:left;
}
.testimonial-author span {
font-size: 12px;
color: #666;
}
This is absolutely fantastic.
Hi,
Thanks for this useful css. We are using it in our beta site Testimonials page. http://beta.partysuppliesnow.com.au/customer-reviews.php
Once again thanks
Waqas
Hi Waqas, Awesome
Thanks for the update
Hey – This looks great! I tried adding to my style.css but the page is not showing the bubble, just the text. Any ideas?
Did you add the
testimonialclass to the blockquote? If you have a link I’ll take a look for you.OMG thank you!
I had totally given up on finding a way to style my testimonials in a way I could not just live with, but love! Thank you sooooo much for posting this. You totally made my day!
Very cool – I’m going to use it for a friends website.
love this code and have implemented it on my site http://www.maid2ordercleaning.com/testimonials.php but for some reason I don’t get the quotation marks in ie10. Anyone know what the issue is?
Your link gives me a 404. It may be possible you are viewing on a old browser that doesn’t support pseudo-elements. IE7 and older don’t support them. See http://caniuse.com/css-gencontent
Really useful bit of code
Thanks! Shared on G+