Posted By

jntu_gnec on 05/11/12

Tagged

Versions (?)

Last Edited at 05/11/12 05:13am

Statistics

Viewed 595 times

Favorited by 1 user(s)

Related snippets

iPhone Text Message Screen

/ Published in: CSS

Very cute iPhone message screen created in CSS.

Highlighted TextExpand

HTML :

<div class="container"> 
  <div class="text-right"> 
      <p class="white-shadow">Hey</p> 
  </div> 
  <div class="text-left"> 
    <p class="white-shadow">Hi!</p> 
  </div> 
  <div class="text-right"> 
    <p class="white-shadow">What's up</p> 
  </div> 
  <div class="text-left"> 
    <p class="white-shadow">Not much u?</p> 
  </div> 
  <div class="text-right"> 
    <p class="white-shadow">This is made using CSS3 only xD</p> 
  </div> 
  <div class="text-left"> 
    <p class="white-shadow"> 
        Wow, this even works for multi-line  
        messages like this one and doesn't break  
        the design! Cool!!!!!! 
      </p> 
  </div> 
</div>

CSS:

body { background-color: #dbe2ed }

.container { 
    width: 688px; 
    margin: 0 auto; 
}

.white-shadow { 
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px); 
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px); 
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px); 
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px); 
    background-image: -linear-gradient(top, rgba(255, 255, 255, .8) 4px, rgba(255, 255, 255, .28) 8px); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, .8)) 4px, to(rgba(255, 255, 255, .28)) 8px); 
    padding: 2px 8px 4px; 
    margin: 0; 
    border-radius: 24px; 
}

.text-left { 
    background-color: #d2d2d2; 
    background-image: -webkit-linear-gradient(top, #9da0a6, #d2d2d2 17px, #e5e5e5 92%); 
    border-radius: 15px; 
    box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.6); 
    font: 15px Helvetica, Arial, sans-serif; 
    margin: 1em 51% 1em 0; 
    padding: 0 4px; 
    position: relative; 
    border-width: 1px; 
    border-color: #9DA0A6 #9DA0A6 #9DA0A6 transparent; 
    border-style: solid; 
}

.text-right { 
    background-color: #a9e24c; 
    background-image: -webkit-linear-gradient(top, #309b19, #a9e24c 17px, #9bcc45 92%); 
    border-radius: 15px; 
    box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.6); 
    font: 15px Helvetica, Arial, sans-serif; 
    margin: 1em 0 1em 51%; 
    padding: 0 4px; 
    position: relative; 
    border-width: 1px; 
    border-color: #309b19 transparent #309b19 #309b19; 
    border-style: solid; 
}

.text-left:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    bottom: -1px; 
    height: 6px; 
    border-right: 14px solid #d5d5d5; 
    background: #dbe2ed; 
    -webkit-border-bottom-right-radius: 36px 18px; 
    -moz-border-radius-bottomright: 36px 18px; 
    border-bottom-right-radius: 36px 18px; 
    box-shadow: 2px 2px 2px #9da0a6; 
    -webkit-transform: translate(0, -2px); 
    -moz-transform: translate(0, -2px); 
    -ms-transform: translate(0, -2px); 
    -o-transform: translate(0, -2px); 
    transform: translate(0, -2px); 
    right: 98%; 
}

.text-left:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    bottom: 0px; 
    right: 95.5%; 
    width: 28px; 
    height: 12px; 
    background: #dbe2ed; 
    -webkit-border-bottom-right-radius: 18px 12px; 
    -moz-border-radius-bottomright: 18px 12px; 
    border-bottom-right-radius: 20px 20px; 
    -webkit-transform: translate(-12px, -2px); 
    -moz-transform: translate(-12px, -2px); 
    -ms-transform: translate(-12px, -2px); 
    -o-transform: translate(-12px, -2px); 
    transform: translate(-12px, -2px); 
}

.text-right:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    bottom: -1px; 
    height: 6px; 
    border-left: 14px solid #a9e24c; 
    background: #dbe2ed; 
    -webkit-border-bottom-left-radius: 36px 18px; 
    -moz-border-radius-bottomleft: 36px 18px; 
    border-bottom-left-radius: 36px 18px; 
    box-shadow: 2px 2px 2px #9da0a6; 
    -webkit-transform: translate(0, -2px); 
    -moz-transform: translate(0, -2px); 
    -ms-transform: translate(0, -2px); 
    -o-transform: translate(0, -2px); 
    transform: translate(0, -2px); 
    left: 98%; 
}

.text-right:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    bottom: 0px; 
    left: 103.5%; 
    width: 28px; 
    height: 12px; 
    background: #dbe2ed; 
    -webkit-border-bottom-left-radius: 20px 12px; 
    -moz-border-radius-bottomleft: 20px 12px; 
    border-bottom-left-radius: 20px 20px; 
    -webkit-transform: translate(-12px, -2px); 
    -moz-transform: translate(-12px, -2px); 
    -ms-transform: translate(-12px, -2px); 
    -o-transform: translate(-12px, -2px); 
    transform: translate(-12px, -2px); 
}

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.