×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: HTML
Posted by: Davidd Anthony S
Added: May 26, 2015 10:31 PM
Views: 14
Tags: no tags
http://codepen.io/2ne/pen/osvpj
  1. <header><span class="left">Messages</span><h2>Jonathan Ive</h2><span class="right">Contact</span></header>
  2. <div class="messages-wrapper">
  3.   <div class="message to">This is my first text message on ios7 This is my first text message on ios7</div>
  4.   <div class="message from">This is my second text message on ios7</div>
  5.   <div class="message from">This is my third text message on ios7</div>
  6.   <div class="message to">This is my fouth text message on ios7</div>
  7.   <div class="message from">This is my fifth text message on ios7</div>
  8.   <div class="message to">This is my sixth text message on ios7</div>
  9.   <div class="message to">This is my seventh text message on ios7</div>
  10. </div>
  11. @import "http://fonts.googleapis.com/css?family=Open+Sans:400,600,700";
  12. * {
  13.     box-sizing: border-box;
  14. }
  15. body {
  16.     background: none repeat scroll 0 0 #fff;
  17.     color: #FFFFFF;
  18.     font-family: "Open Sans";
  19.     line-height: 26px;
  20.     width: 400px;
  21.     margin: 0 auto;
  22.     overflow-X: hidden;
  23.     position: relative;
  24. }
  25. .left {
  26.   position: absolute;
  27.   top: 0;
  28.   left: 35px;
  29.   font-size: 18px
  30. }
  31.  
  32. .left:after {
  33.     border: 3px solid #2095FE;
  34.     border-right: 3px solid transparent;
  35.     border-top: 3px solid transparent;
  36.     content: " ";
  37.     height: 14px;
  38.     left: -20px;
  39.     position: absolute;
  40.     top: 20px;
  41.     -webkit-transform: rotate(45deg);
  42.   -moz-transform: rotate(45deg);
  43.   transform: rotate(45deg);
  44.     width: 14px;
  45. }
  46. .right {
  47.   position: absolute;
  48.   top: 0;
  49.   right: 15px;
  50.   font-size: 18px
  51. }
  52. header {
  53.   color: #2095FE;
  54.   background: #eee;
  55.   border: 1px solid #ccc;
  56.   border-bottom: 1px solid #bbb;
  57.   box-shadow: 0 1px 2px rgba(1,1,1,0.2);
  58.   height: 60px;
  59.   text-align: center;
  60.   font-size: 20px;
  61.   line-height: 58px;
  62.   white-space: nowrap;
  63.  
  64. }
  65. header h2 {
  66.   font-weight: bold;
  67.   color: #111111;
  68. }
  69. .messages-wrapper {
  70.   padding-top: 10px;
  71.   position: relative;
  72.   border: 1px solid #ddd;
  73.   border-top: 0 none;
  74. }
  75. .message {
  76.     border-radius: 20px 20px 20px 20px;
  77.     margin: 0 15px 10px;
  78.     padding: 15px 20px;
  79.     position: relative;
  80. }
  81. .message.to {
  82.     background-color: #2095FE;
  83.     color: #fff;
  84.     margin-left: 80px;
  85. }
  86. .message.from {
  87.     background-color: #E5E4E9;
  88.     color: #363636;
  89.     margin-right: 80px;
  90. }
  91. .message.to + .message.to,
  92. .message.from + .message.from {
  93.   margin-top: -7px;
  94. }
  95. .message:before {
  96.     border-color: #2095FE;
  97.     border-radius: 50% 50% 50% 50%;
  98.     border-style: solid;
  99.     border-width: 0 20px;
  100.     bottom: 0;
  101.     clip: rect(20px, 35px, 42px, 0px);
  102.     content: " ";
  103.     height: 40px;
  104.     position: absolute;
  105.     right: -50px;
  106.     width: 30px;
  107.     z-index: -1;
  108. }
  109. .message.from:before {
  110.     border-color: #E5E4E9;
  111.     left: -50px;
  112.     transform: rotateY(180deg);
  113. }</style>