Pure CSS Chat Bubbles for Instant Messaging UI

I may be in the minority of Apple users but I still prefer the original iOS 6 glossy chat bubbles to the newer flat UI. These bubbles are still found in the iChat application for OS X but are no longer supported on mobile devices. With greater advancements in CSS3 it's a quite easy to recreate these glossy gradient bubbles in a browser without using any background images.

Live Demo - Download Source Code

In this tutorial I want to demonstrate how we can rebuild an Apple-style instant messaging interface with pure CSS. There are some rendering issues with older versions of Internet Explorer 5-9 which can be fixed using older CSS syntax or a library such as CSS3 Pie. But in general this tutorial was created for modern browsers and will look best when all CSS3 properties are supported. Take a peek at my live demo to see the final design.

Building the Basics

I want to start by giving credit to a couple other developers who inspired this tutorial. After finding this glossy button tutorial on Hongkiat I went in search of a similar effect for chat bubbles. I then stumbled onto a fantastic CSSDeck snippet which provided an excellent resource for this piece.

However I really wanted to customize the interface to look more like a typical iOS SMS app screen. It would have more rounded bubble tips and a glossier shiny gradient, plus I wanted to recreate the layout to be responsive for any screen size. Also I thought it would be fun to create new unique color schemes extended from CSS3 gradients. This example provides an excellent framework to recreate chat bubbles using any HTML5 element beyond just divs.

You can tell from the code above that it's very simple to add new bubbles onto the page. Each bubble div uses a single class .bubble which appends the typical blue color scheme. A secondary class of .bubble-alt will rearrange the message div onto the right side instead of the left. This also updates the arrow tip from the left to right corner.

You'll also notice I have some extra classes to change up the color schemes on a few of these bubbles. I didn't copy all of the page's HTML but from the code snippet above you'll see .green and .white, both of which are commonly used bubble colors within Apple's chat interfaces.

Page & Bubble Structure

Inside my CSS file is where all the magic happens. I'm using the same background color as you'd find on all the < iOS 6 SMS applications. The .container div is also responsive with a maximum width of 600px.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

/** page structure **/
.container {
  padding: 40px 20px;
  margin: 0 auto;
  max-width: 600px;
}
 
 
.datestamp {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
  color: #8b91a0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}
 
 
/** ios1-ios6 bubbles **/
.bubble {
  box-sizing: border-box;
  float: left;
  width: auto;
  max-width: 80%;
  position: relative;
  clear: both;
 
  background: #95c2fd;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #bee2ff), color-stop(1, #95c2fd));
  background-image: -webkit-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -moz-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -ms-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -o-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#95c2fd', endColorstr='#bee2ff');
 
  border: solid 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
 
  -webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  margin-bottom: 20px;
  padding: 6px 20px;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  word-wrap: break-word;
}

This large block of CSS includes a timestamp class, found on most Apple IM screens. But more importantly we can see a long list of properties for the .bubble class which also includes pseudo-classes to add extra effects.

The bubble container uses relative positioning because the arrow tips are positioned absolutely within this element. Each background gradient is used to recreate the same effect with a small color at the bottom rising up into a darker color at the top. Instead of splitting the gradient at 50% it makes more sense to use a lower number - in this case I've chosen 15%.

Also the box shadow property creates 2 separate shadow effects. First is an inset shadow of semi-transparent white to appear like a glossy shine at the top. Then I'm adding a very slight drop shadow at the bottom which can be seen in the older iOS chat app.

Each bubble uses a border which needs to match the same color scheme. This could be done manually for each color, but with CSS3's rgba() syntax we can use the alpha value to create a black border with 50% opacity. This will show the color underneath and recreate a darker border for each bubble. Notice this same effect is used for the :before and :after pseudo-classes to append this same border onto the arrow tip.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.bubble:before, .bubble:after {
  border-radius: 20px / 5px;
  content: '';
  display: block;
  position: absolute;
}
.bubble:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0,0,0,0.5);
  bottom: 0px;
  left: -7px;
  z-index: -2;
}
.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #bee2ff; /* arrow color */
  bottom: 1px;
  left: -5px;
}

The pseudo classes will be applied onto every bubble regardless of color or location. The :before selector will create a shadow beneath the tip which is why we need a lower z-index value. Then :after creates the brighter tip color using a large border and some rounded corners.

Restyling Bubbles

Since the initial class offers such a great template we don't need to update a whole lot of properties to get the alternative positions or colors. This is why cascading properties are so important to developers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.bubble-alt {
  float: right;
}
.bubble-alt:before {
  left: auto;
  right: -7px;
}
.bubble-alt:after {
  left: auto;
  right: -5px;
}
 
.bubble p {
  font-size: 1.4em;
}

The .bubble-alt class may be applied onto any bubble container to switch sides. It floats over to the right instead of the left while also relocating the individual tooltip arrow & shadow. Notice the actual values are still similar(-7px and -5px) but located on the right side instead of the left.

To create new colors all we need to do is update the backgrounds and borders according to whichever gradient you wish to achieve. I've only seen Apple chat messages using blue, white, and green. But for this demo I created a small handful of extra color styles which follow very similar design patterns.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* yellow bubble */
.yellow {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #fcf3c3),color-stop(1, #f4e371));
  background-image: -webkit-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -moz-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -ms-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -o-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f4e371', endColorstr='#fcf3c3');
}
.yellow:after {
  border-bottom-color: #fcf3c3;
}

This is my example code for the yellow color scheme. Each class will have a duplicate syntax for the cascading properties. background sets a solid color just in case none of the CSS gradient properties work. background-image is placed afterwards to take precedent over the plain background color. Each gradient only uses 2 colors with a gradient shift at 15% of the bubble's height.

The only separate color change is to the arrow tip itself. Since that arrow is created using a border we update to the new color using border-bottom-color. The arrows are located at the bottom of each bubble so I'm copying the bottom color from the gradient and using this hex value for the arrow color.

And that pretty much wraps it all up! Very minimal HTML code and the CSS is easily extensible for additional color schemes. As I mentioned these bubbles are responsive so you could even copy this design for your own mobile-based web application or responsive website layout.

Closing

There are some great JS libraries which can offer support for CSS3 in older browsers, but at some point web developers have to accept that many users are just unwilling to upgrade. Background images might provide a nice fallback in this situation. If you're looking to push CSS3 even further you can download a free copy of my source code and try to expand upon this tutorial.