A CodePen by Federico Commisso. CSS3 iOS-text-message-like notice - Used CSS3 to make a top notice alert just like iOS uses for push notifications while user is in other apps. I am using this to display user alert messages in a web application using Rails, Backbone.js, CoffeeScript, CSS3 and HTML5 techonologies.

index.haml

.container
  .wrap
    %figure FIGURE
  
    %header HEADER



#click-me
  %a{href: 'javascript:void(0)'} Click Me

script.coffee

$(document).ready ->
  t = null 

  $('#click-me').click () ->
    
    window.clearTimeout(t);
    
    top_bar = $('figure, header')
    
    top_bar.toggleClass 'rotate'
    
    t = window.setTimeout ( ->
      if top_bar.hasClass 'rotate'
        top_bar.removeClass 'rotate'
    ), 3000

style.scss

@import "compass";
body { margin: 0px; padding: 0px; text-align: center; line-height: 70px; }

.container { 
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
width: 100%;
height: 70px;
-webkit-perspective: 1000px;
  
  -webkit-transform: translate3d(0px, -15px, 0px);
  
  margin: 0px;
}

.wrap {

  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  width: 100%;
  height: 70px;
  margin: 0px;
  
}

figure { width:100%;
  height: 70px; background: orange;
  
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: flat;
  -webkit-transition: -webkit-transform .3s linear;
  -webkit-perspective-origin: 100% 0%;
  -webkit-transform: translate3d(-40px, -40px, -10px) rotateX(90deg);
  
  
   &.rotate { 
    -webkit-transform: translate3d(-40px, 0px, 0px)  rotateX(0deg); }

}

header { width:100%;
  height: 70px; background: grey;
  
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: flat;
  -webkit-transition: -webkit-transform .3s linear;
  -webkit-perspective-origin: 100% 0%;
  -webkit-transform: translate3d(0px, -85px, 0px) rotateX(0deg);

  
  &.rotate { 
    -webkit-transform: translate3d(0px, -50px, -10px)  rotateX(-90deg); }

}




.click-me { margin-top: 10em; z-index: 2; }