×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

ios Messenger for forums

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

Write a comment

To post comments, please log in or register.