Jun
14

Pretty CSS Testimonials

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)

Pretty CSS Testimonials

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;
}

Tags:

39 Comments on: “Pretty CSS Testimonials”

  1. Giz Zee

    This is absolutely fantastic.

    • Trent Nelson

      Really appreciate this! Easy bundle of help :) Thanks again

  2. 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

    • admin

      Hi Waqas, Awesome :) Thanks for the update

  3. Geoff

    Hey – This looks great! I tried adding to my style.css but the page is not showing the bubble, just the text. Any ideas?

    • admin

      Did you add the testimonial class to the blockquote? If you have a link I’ll take a look for you.

  4. 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!

  5. Max

    Very cool – I’m going to use it for a friends website.

  6. 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?

    • admin

      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

  7. Really useful bit of code :) Thanks! Shared on G+

  8. Viv

    Sweet, thanks so much for this, really helped me a lot :)

  9. I love this – And I would like to use it!

    I cant find the right code for my site though :(

    We have some code on our site and it starts like this:

    <!–

    var slideimages=new Array()
    var slidelinks=new Array()
    function slideshowimages(){
    for (i=0;i<slideshowimages.arguments.length;i++){
    slideimages[i]=new Image()
    slideimages[i].src=slideshowimages.arguments[i]
    }
    }

    function slideshowlinks(){
    for (i=0;i<slideshowlinks.arguments.length;i++)
    slidelinks[i]=slideshowlinks.arguments[i]
    }

    Any suggestions?

    • admin

      The CSS would need to be added to you website’s CSS file. Then you need to markup your testimonials like shown in the example. The code you gave there is JavaScript for a slideshow. You really would have to ask your website designer to add it for you I think.

  10. RobertB

    Thanks very much for this….this will be a great staple for me…trying to get it to work on my WordPress site but I thought I would offer up that instead of using using px for the arrows, % might be better for responsive layouts…I have three core colors on my website so I modified everything to be testimonial1, testimonial2, etc and then on the arrow I did 25% margin for one and then 75% margin on the one below, etc. in multiples of three to mix it up a bit.

    • admin

      Yeah I would probably favour using em or % margins now too.

  11. RobertB

    I still don’t why my child theme would not carry over to the regular theme….But, here is what I ended up with….for the “flat” look, I opted to not having quotation marks…it seemed like overkill with a speech balloon. Thanks again for sharing this tutorial. http://www.northstarmultimedia.com/testimonials/

  12. Hello, I am trying to use your code to create a testimonial on our landing pages. The HTML created a box and background surrounding the text but when I entered the CSS code into the style.css stylesheet nothing happened. I was expecting the arrow and quotes to appear. Am I doing something wrong?

    • admin

      Hi, If you can provide a sample link I can take a look for you.

  13. Rick H

    Thanks for posting this. I’m researching some testimonial formatting for a client and this article had some great ideas in it.

    I do have one question about it. Why do you need to repeat the rule content: “\201D”; in the testimonial:after style, since it was already in the rule for both the before and after styles.

    • admin

      Actually the content property for both the :before and :after pseudo-elements was the unicode character 201C (left double quotation mark) whereas for the :after property it gets changed to 201D (right double quotation mark).

  14. Darleen

    Hi:
    I am working on a site that is a Genesis child theme – Metro and testimonials are working great but since I added to this site – my footer is all messed up and I cannot sort out reason. http://newsite.dreamreading.ca
    Page – csshttp://newsite.dreamreading.ca/buy-the-book/

  15. Darleen

    I have sorted it out – found by unlclosed

  16. Very useful article! I have implemented this on my website http://www.graphixdesignsolution.com

  17. We placed this on our own site pulling from JSON via a PHP include. Check it out on all of our pages and our http://www.credocomputers.com/testimonials/ page. We added a gradient, rounded the corners, and a few other things. Thank you so much for allowing this to be available.

  18. I currently am using Headway theme editor. I want to implement this and am new to wordpress. Where would I place the code? Sorry for the ignorance

  19. Hey! Thanks for posting this snippet. It looks great!

    Good job.

    Rgds.

    Ray

  20. awesome! using it on a website now… will send the link when done. thank you for the contribution.

  21. Nicole

    Hi there I used this on my testimonials page here: http://www.movemyrealty.com/MyTestimonials

    It worked lovely, but any idea why it moved my main table to the left side of the page instead of it being centered? The rest of the website is centered but when that page is clicked on it’s shifted over to the left hand side.

    • admin

      You seem to have included the styles as an internal style sheet just above the testimonial markup. For some reason there is an additional body selector at the top: body { margin: 50px; width: 600px; } Removing that centres the page content again.

      Ideally you will want to put the CSS in your main stylesheet or at least in the head (also your website appears to be missing the head tag).

  22. Simply but beauty. Nice share, Thanks ;)

  23. Ken H

    This is AWESOME code. You did a fantastic job!

    Thank you!

  24. Thanks for such a great code.

  25. Neat – that will make our testimonials page looks way cooler

    Thanks

  26. phuongpt

    thanks pro

  27. Great tutorial. Easy to learn & utilize. Using it now on my website! Thank you!

  28. Steve

    Is it possible to add an icon image to the left of the quote?

Leave a Comment:

Our Prices RSS Feed