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); | |
} | |
|
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!
Leave A Comment