How to create chat bubbles like facebook Messenger

by

This is a rather basic example but it should explain all of the fundamentals you require.

Most of the solution lies within + adjacent sibling selector. In this case, it’s used to apply a different border radius to multiple messages in a row from the same person.

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  display:inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.him{
  background: #eee;
  float: left;
}

.me{
  float: right;
  background: #0084ff;
  color: #fff;
}

.him + .me{
  border-bottom-right-radius: 5px;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.me:last-of-type {
  border-bottom-right-radius: 30px;
}
<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

More Related Contents:

  1. Can't get footer image to display in IE8?
  2. How to change the color of text?
  3. How to force child div to be 100% of parent div’s height without specifying parent’s height?
  4. SVG drop shadow using css3
  5. How to replicate background-attachment fixed on iOS [duplicate]
  6. How to customize ?
  7. How to make a pure css based dropdown menu?
  8. Switching the order of block elements with CSS [duplicate]
  9. Unwanted margin in inline-block list items [duplicate]
  10. Background image not showing in Safari
  11. How to vertically align into the center of the content of a div with defined width/height?
  12. How to make an element’s background-color a little darker using CSS
  13. What is the performance impact of the universal selector?
  14. Allow specific tag to override overflow:hidden
  15. Place boxes inside ul in center, but align them left
  16. Aligning decimal points in HTML
  17. Can I nest button inside another button?
  18. How to add border to a container with transparent gaps in between
  19. How to strike through obliquely with css
  20. HTML float right element order
  21. Add text above HTML5 Video
  22. How to get tiles centered and left-justified at the same time
  23. Bootstrap navbar: nothing is displayed on smaller devices
  24. Why does inline-block cause this div to have height?
  25. Text-align class for inside a table
  26. Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
  27. How to float a div over Google Maps?
  28. Will targeting IE8 with conditional comments work?
  29. Removing the Bevel Effect on the Corner of Borders
  30. CSS class starting with number is not getting applied

Leave a Comment