Advanced Search

iPhone Text Message Screen

/ Published in: CSS
Save to your folder(s)
Very cute iPhone message screen created in CSS.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.