About design and nearby

Speech Bubbles powered by CSS

Posted: July 11th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , , , | No Comments »

(*and a little bit of jQuery – just to show more content or hide it)

Speech bubbles are a popular effect and you can create a stunning style using it for testimonials or comments.

speech bubble image

For one of my project I apply CSS powered solution with hide/ show jQuery effects. It helps me to save space (while showing the beginning of my text only) and at the same moment open the whole block if it needs. Long story short, here the source for my example:

  1. <div class="description">Hi there, I'm a Speech Bubble. I'm created with pure CSS
  2.        <a class="to_links">read more</a>
  3.        <em> and a little bit of jQuery – just to show more content or hide it.
  4.          <a class="out_links">less</a>
  5.        </em>
  6. </div>
  7. <div class="arrow_quote"></div>

The styles – for the speech bubble itself:

  1. .description {
  2. background: none repeat scroll 0 0 whiteSmoke;
  3. border: 1px solid #DBE1E6;
  4. overflow: hidden;
  5. padding: 20px;
  6. position: relative;
  7. z-index: 10;
  8. -moz-border-radius: 10px;
  9. -webkit-border-radius: 10px;
  10. border-radius: 10px;
  11. text-shadow: 1px 1px 0px white;
  12. filter: dropshadow(color=#ffffff, offx=1, offy=1);
  13. }
  14. .arrow_quote {
  15. background: url(images/arrow_quote.gif) left top no-repeat; /*I used an image, but it's possible to draw this element with CSS only*/
  16. width: 30px;
  17. height: 31px;
  18. position: relative;
  19. margin-left: auto;
  20. margin-right: 43px;
  21. z-index: 20;
  22. top:1px;
  23. }

As I’d like to implement jQuery hide/ show effects, I add (after including jQuery library)

  1. $(document).ready(function () {
  2.     $(".description > em").hide();
  3.     $('a.to_links').click(
  4.     function () {
  5.          $(this).next("em").show('800');
  6.          $(this).hide();
  7.     });
  8.     $('a.out_links').click(
  9.     function () {
  10.          $(this).parent("em").hide();
  11.          $(this).parent().parent().find('a.to_links').show('600');
  12.     });
  13. });

and styles – to touch it up a little:

  1. em {
  2. font-style: normal;
  3. }
  4. a.to_links {
  5. cursor: pointer;
  6. background: url(images/to_links.gif) left no-repeat;
  7. padding-left: 14px;
  8. margin-left: 5px;
  9. }
  10. a.out_links {
  11. cursor: pointer;
  12. background: url(images/out_links.gif) left no-repeat;
  13. padding-left: 14px;
  14. margin-left: 5px;
  15. }

Live example: check the example >>

Share Button

Check Related Posts:


Leave a Reply


  • + three = 9

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now