Created
August 3, 2016 00:03
-
-
Save jadaradix/6610b38d8093c1544682b129a610c217 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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