Advanced Search

Pure CSS Web 2.0 Style Comment Bubbles

/ Published in: CSS
Save to your folder(s)
This implements a pure CSS technique for creating triangles. A great practical usage of this is Web 2.0 style comment/speach bubbles. Demo: http://www.adamcoulombe.info/lab/css/comment-bubbles.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Pure CSS Web 2.0 Comment Bubbles</title>
  6.  
  7.  
  8. <style type="text/css">
  9. body { font:20px Arial, Helvetica, sans-serif; }
  10. .bubble1 { overflow:hidden; margin:20px; }
  11. .bubble1 .speach { background-color:#000000; color:#FFFFFF; padding:20px; }
  12. .bubble1 .arrow{ float:right; margin-right:15px; width:0; height:0; border-left: 10px solid transparent;  border-right: 10px solid transparent; border-top: 10px solid #000000; border-bottom: 0; }
  13. .bubble2 { overflow:hidden; margin:20px; }
  14. .bubble2 .speach { background-color:#d9ecfb; color:#486175; padding:20px; }
  15. .bubble2 .arrow{ float:right; margin-right:15px; width:0; height:0; border-left: 15px solid transparent;  border-right: 15px solid #d9ecfb; border-bottom: 15px solid transparent; border-top: 0; }
  16. .bubble3 { overflow:hidden; margin:20px; position:relative; }
  17. .bubble3 .speach { background-color:#ebe5d2; color:#7b6f49; padding:20px; margin-left:15px; }
  18. .bubble3 .arrow{ width:0; height:0; border-left: 0px solid transparent;  border-right: 15px solid #ebe5d2; border-bottom: 15px solid transparent; border-top: 0; position:absolute; left:0px; top:10px; }
  19. .bubble4 { overflow:hidden; margin:20px; position:relative; }
  20. .bubble4 .speach { background-color:#dfebd2; color:#526340; padding:20px; margin-right:15px; }
  21. .bubble4 .arrow{ width:0; height:0; border-right: 0px solid transparent;  border-left: 15px solid #dfebd2; border-top: 15px solid transparent; border-bottom: 0; position:absolute; right:0px; bottom:10px; }
  22. </style>
  23. </head>
  24.  
  25. <body>
  26. <div class="bubble bubble1">
  27. <div class="speach">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  28. <div class="arrow"></div>
  29. </div>
  30. <div class="bubble bubble2">
  31. <div class="speach">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  32. <div class="arrow"></div>
  33. </div>
  34. <div class="bubble bubble3">
  35. <div class="speach">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  36. <div class="arrow"></div>
  37. </div>
  38.  
  39. <div class="bubble bubble4">
  40. <div class="speach">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  41. <div class="arrow"></div>
  42. </div>
  43. </body>
  44. </html>

URL: http://www.adamcoulombe.info/lab/css/comment-bubbles.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.