Skip to content

Instantly share code, notes, and snippets.

@jadaradix

jadaradix/ios9-messages-css.html

Created August 3, 2016 00:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jadaradix/6610b38d8093c1544682b129a610c217 to your computer and use it in GitHub Desktop.
Save jadaradix/6610b38d8093c1544682b129a610c217 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ios9-messages-css.html
<!-- BASED ON https://codepen.io/2ne/pen/osvpj -->
<html>
<head>
<style>
.ios {
font-family: sans-serif;
line-height: 26px;
position: relative;
width: 500px;
height: 500px;
}
.ios header {
color: #007AFF;
background: #F0F0F0;
border: 1px solid #ccc;
text-align: center;
height: 56px;
line-height: 56px;
white-space: nowrap;
font-size: 18px;
}
.ios header .left {
position: absolute;
top: 0;
left: 35px;
}
.ios header .left:after {
border: 3px solid #007AFF;
border-right: 3px solid transparent;
border-top: 3px solid transparent;
content: " ";
height: 14px;
left: -20px;
position: absolute;
top: 19px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
width: 14px;
}
.ios header .right {
position: absolute;
top: 0;
right: 15px;
}
.ios header h2 {
font-weight: bold;
font-size: inherit;
color: #111111;
line-height: inherit;
margin: 0;
}
.ios .messages-wrapper {
padding-top: 10px;
position: relative;
border: 1px solid #ddd;
border-top: 0 none;
height: 444px;
}
.ios .messages-wrapper .message {
border-radius: 20px 20px 20px 20px;
margin: 0 15px 10px;
padding: 10px 15px;
position: relative;
font-size: 16px;
}
.ios .messages-wrapper .message:before {
border-radius: 50% 50% 50% 50%;
border-style: solid;
border-width: 0 20px;
bottom: 0;
clip: rect(20px, 35px, 42px, 0px);
content: " ";
height: 40px;
position: absolute;
right: -50px;
width: 30px;
z-index: -1;
}
.ios .messages-wrapper .message.to + .message.to,
.ios .messages-wrapper .message.from + .message.from {
margin-top: -7px;
}
.ios .messages-wrapper .message.to {
background-color: #1C92FD;
color: #fff;
margin-left: 80px;
}
.ios .messages-wrapper .message.to:before {
border-color: #1C92FD;
}
.ios .messages-wrapper .message.from {
background-color: #E5E5EA;
color: #363636;
margin-right: 80px;
}
.ios .messages-wrapper .message.from:before {
border-color: #E5E5EA;
left: -50px;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="ios">
<header><span class="left">Messages</span><h2>Jonathan Ive</h2><span class="right">Details</span></header>
<div class="messages-wrapper">
<div class="message to">Quisque posuere elementum diam. In sed augue eu dolor vestibulum efficitur. Pellentesque est tellus, tempor a semper fringilla, interdum euismod dolor. Aenean placerat suscipit velit, volutpat consectetur nisi sollicitudin eu. Nulla dui ex, vehicula sed elementum ac, tempor vitae dui.</div>
<div class="message from">Maecenas odio erat, accumsan eu arcu eu, iaculis congue orci. Nullam vehicula nibh id eros bibendum luctus. Maecenas elit libero, vulputate at justo id, interdum lobortis ante.</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment