Posted By

jntu_gnec on 05/11/12


Tagged

iphonemessagecssmegawrz


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

bindirtit


iPhone Text Message Screen


 / Published in: CSS
 

URL: http://www.megawrz.com/css/189944-iphone-text-message-screen.html

Very cute iPhone message screen created in CSS.

  1. HTML :
  2.  
  3. <div class="container">
  4. <div class="text-right">
  5. <p class="white-shadow">Hey</p>
  6. </div>
  7. <div class="text-left">
  8. <p class="white-shadow">Hi!</p>
  9. </div>
  10. <div class="text-right">
  11. <p class="white-shadow">What's up</p>
  12. </div>
  13. <div class="text-left">
  14. <p class="white-shadow">Not much u?</p>
  15. </div>
  16. <div class="text-right">
  17. <p class="white-shadow">This is made using CSS3 only xD</p>
  18. </div>
  19. <div class="text-left">
  20. <p class="white-shadow">
  21. Wow, this even works for multi-line
  22. messages like this one and doesn't break
  23. the design! Cool!!!!!!
  24. </p>
  25. </div>
  26. </div>
  27.  
  28.  
  29. CSS:
  30.  
  31. body { background-color: #dbe2ed }
  32.  
  33. .container {
  34. width: 688px;
  35. margin: 0 auto;
  36. }
  37.  
  38. .white-shadow {
  39. background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
  40. background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
  41. background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
  42. background-image: -o-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
  43. background-image: -linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px);
  44. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, .8)) 4px, to(rgba(255, 255, 255, .28)) 8px);
  45. padding: 2px 8px 4px;
  46. margin: 0;
  47. border-radius: 24px;
  48. }
  49.  
  50. .text-left {
  51. background-color: #d2d2d2;
  52. background-image: -webkit-linear-gradient(top, #9da0a6, #d2d2d2 17px, #e5e5e5 92%);
  53. border-radius: 15px;
  54. box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.6);
  55. font: 15px Helvetica, Arial, sans-serif;
  56. margin: 1em 51% 1em 0;
  57. padding: 0 4px;
  58. position: relative;
  59. border-width: 1px;
  60. border-color: #9DA0A6 #9DA0A6 #9DA0A6 transparent;
  61. border-style: solid;
  62. }
  63.  
  64. .text-right {
  65. background-color: #a9e24c;
  66. background-image: -webkit-linear-gradient(top, #309b19, #a9e24c 17px, #9bcc45 92%);
  67. border-radius: 15px;
  68. box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.6);
  69. font: 15px Helvetica, Arial, sans-serif;
  70. margin: 1em 0 1em 51%;
  71. padding: 0 4px;
  72. position: relative;
  73. border-width: 1px;
  74. border-color: #309b19 transparent #309b19 #309b19;
  75. border-style: solid;
  76. }
  77.  
  78. .text-left:before {
  79. content: "";
  80. position: absolute;
  81. z-index: -1;
  82. bottom: -1px;
  83. height: 6px;
  84. border-right: 14px solid #d5d5d5;
  85. background: #dbe2ed;
  86. -webkit-border-bottom-right-radius: 36px 18px;
  87. -moz-border-radius-bottomright: 36px 18px;
  88. border-bottom-right-radius: 36px 18px;
  89. box-shadow: 2px 2px 2px #9da0a6;
  90. -webkit-transform: translate(0, -2px);
  91. -moz-transform: translate(0, -2px);
  92. -ms-transform: translate(0, -2px);
  93. -o-transform: translate(0, -2px);
  94. transform: translate(0, -2px);
  95. right: 98%;
  96. }
  97.  
  98. .text-left:after {
  99. content: "";
  100. position: absolute;
  101. z-index: -1;
  102. bottom: 0px;
  103. right: 95.5%;
  104. width: 28px;
  105. height: 12px;
  106. background: #dbe2ed;
  107. -webkit-border-bottom-right-radius: 18px 12px;
  108. -moz-border-radius-bottomright: 18px 12px;
  109. border-bottom-right-radius: 20px 20px;
  110. -webkit-transform: translate(-12px, -2px);
  111. -moz-transform: translate(-12px, -2px);
  112. -ms-transform: translate(-12px, -2px);
  113. -o-transform: translate(-12px, -2px);
  114. transform: translate(-12px, -2px);
  115. }
  116.  
  117. .text-right:before {
  118. content: "";
  119. position: absolute;
  120. z-index: -1;
  121. bottom: -1px;
  122. height: 6px;
  123. border-left: 14px solid #a9e24c;
  124. background: #dbe2ed;
  125. -webkit-border-bottom-left-radius: 36px 18px;
  126. -moz-border-radius-bottomleft: 36px 18px;
  127. border-bottom-left-radius: 36px 18px;
  128. box-shadow: 2px 2px 2px #9da0a6;
  129. -webkit-transform: translate(0, -2px);
  130. -moz-transform: translate(0, -2px);
  131. -ms-transform: translate(0, -2px);
  132. -o-transform: translate(0, -2px);
  133. transform: translate(0, -2px);
  134. left: 98%;
  135. }
  136.  
  137. .text-right:after {
  138. content: "";
  139. position: absolute;
  140. z-index: -1;
  141. bottom: 0px;
  142. left: 103.5%;
  143. width: 28px;
  144. height: 12px;
  145. background: #dbe2ed;
  146. -webkit-border-bottom-left-radius: 20px 12px;
  147. -moz-border-radius-bottomleft: 20px 12px;
  148. border-bottom-left-radius: 20px 20px;
  149. -webkit-transform: translate(-12px, -2px);
  150. -moz-transform: translate(-12px, -2px);
  151. -ms-transform: translate(-12px, -2px);
  152. -o-transform: translate(-12px, -2px);
  153. transform: translate(-12px, -2px);
  154. }

Report this snippet  

You need to login to post a comment.