So I just finished reading up Nick Gallagher’s article on Pure CSS speech bubbles and decided to try it out for myself while watching the Celtics blow a 10 point lead against the Hawks (sigh…).

The Demo

iPhone Text Message Screen Using Only CSS3 (NOTE: you’ll need to stretch out the Result screen at least 688px to see the speech tails)

The Code

 

body {
background-color: #dbe2ed;
}
.container {
width: 688px;
margin-left: 1em;
}
.white-shadow {
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
background-image: -linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, .8)) 4px, to(rgba(255, 255, 255, .28)) 8px);
padding: 2px 8px 4px;
margin: 0;
border-radius: 24px;
}
.text-left {
background-color: #d2d2d2;
background-image: -webkit-linear-gradient(top, #9da0a6, #d2d2d2 17px, #e5e5e5 92%);
border-radius: 15px;
box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.6);
font: 15px Helvetica, Arial, sans-serif;
margin: 1em 51% 1em 0;
padding: 0 4px;
position: relative;
border-width: 1px;
border-color: #9DA0A6 #9DA0A6 #9DA0A6 transparent;
border-style: solid;
}
.text-right {
background-color: #a9e24c;
background-image: -webkit-linear-gradient(top, #309b19, #a9e24c 17px, #9bcc45 92%);
border-radius: 15px;
box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.6);
font: 15px Helvetica, Arial, sans-serif;
margin: 1em 0 1em 51%;
padding: 0 4px;
position: relative;
border-width: 1px;
border-color: #309b19 transparent #309b19 #309b19;
border-style: solid;
}
.text-left:before {
content:“”;
position:absolute;
z-index: -1;
bottom: -1px;
height: 6px;
border-right: 14px solid #d5d5d5;
background: #dbe2ed;
-webkit-border-bottom-right-radius:36px 18px;
-moz-border-radius-bottomright:36px 18px;
border-bottom-right-radius:36px 18px;
box-shadow: 2px 2px 2px #9da0a6;
-webkit-transform:translate(0, -2px);
-moz-transform:translate(0, -2px);
-ms-transform:translate(0, -2px);
-o-transform:translate(0, -2px);
transform:translate(0, -2px);
right: 98%;
}
.text-left:after {
content:“”;
position:absolute;
z-index: -1;
bottom: 0px;
right: 95.5%;
width: 28px;
height: 12px;
background:#dbe2ed;
-webkit-border-bottom-right-radius:18px 12px;
-moz-border-radius-bottomright:18px 12px;
border-bottom-right-radius: 20px 20px;
-webkit-transform:translate(-12px, -2px);
-moz-transform:translate(-12px, -2px);
-ms-transform:translate(-12px, -2px);
-o-transform:translate(-12px, -2px);
transform:translate(-12px, -2px);
}
.text-right:before {
content:“”;
position:absolute;
z-index: -1;
bottom: -1px;
height: 6px;
border-left: 14px solid #a9e24c;
background: #dbe2ed;
-webkit-border-bottom-left-radius:36px 18px;
-moz-border-radius-bottomleft:36px 18px;
border-bottom-left-radius:36px 18px;
box-shadow: 2px 2px 2px #9da0a6;
-webkit-transform:translate(0, -2px);
-moz-transform:translate(0, -2px);
-ms-transform:translate(0, -2px);
-o-transform:translate(0, -2px);
transform:translate(0, -2px);
left: 98%;
}
.text-right:after {
content:“”;
position:absolute;
z-index: -1;
bottom: 0px;
left: 103.5%;
width: 28px;
height: 12px;
background:#dbe2ed;
-webkit-border-bottom-left-radius:20px 12px;
-moz-border-radius-bottomleft:20px 12px;
border-bottom-left-radius: 20px 20px;
-webkit-transform:translate(-12px, -2px);
-moz-transform:translate(-12px, -2px);
-ms-transform:translate(-12px, -2px);
-o-transform:translate(-12px, -2px);
transform:translate(-12px, -2px);
}
​
view rawstyle.css hosted with ❤ by GitHub

 

If you’re curious to play with it some more, check out the Fiddle above or fork the repo I made for further refinement and experimentation. Enjoy!