Skip to content

Instantly share code, notes, and snippets.

@kkawamura

kkawamura/index.html

Created August 13, 2013 04:10
Show Gist options
  • Save kkawamura/6217817 to your computer and use it in GitHub Desktop.
Save kkawamura/6217817 to your computer and use it in GitHub Desktop.
Download ZIP
iPhone SMS Style
Raw
index.html
<!DOCTYPE html>
<head>
<title>Chat</title>
<meta charset="utf-8"></meta>
<style type="text/css">
body { background-color: #dbe2ed }
.container {
width: 688px;
margin: 0 auto;
}
.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);
}
</style>
</head>
<body>
<div class="container">
<div class="text-right">
<p class="white-shadow">Hey</p>
</div>
<div class="text-left">
<p class="white-shadow">Hi!!!</p>
</div>
<div class="text-right">
<p class="white-shadow">What's up</p>
</div>
<div class="text-left">
<p class="white-shadow">日本語だよ</p>
</div>
<div class="text-right">
<p class="white-shadow">This is made using CSS3 only xD</p>
</div>
<div class="text-left">
<p class="white-shadow">
Wow, this even works for multi-line
messages like this one and doesn't break
the design! Cool!!!!!!
</p>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment