<h1>Overlay Ribbon</h1>

<p>Pure CSS3 overlay ribbon with slide in/slide out animation.</p>

<div class="overlay-ribbon">
  <div class="ribbon-content">
    <span id="close" class="close-x"><a href="#">x</a></span>
    <div class="img-container"><img src="https://pixabay.com/static/uploads/photo/2015/10/31/21/02/cop-1016218_960_720.jpg" width="171" height="135" alt="" /></div>
    <h3>Speed limit</h3>
    <p>Yes officer, I did see the ‘speed limit’ sign, I just didn’t see you.</p>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Hammersmith+One);
html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-size: 87.5%;
  font-family: Arial, sans-serif;
  background: #ffbf69;
}

h1 {
  text-align: center;
  font-family: 'Hammersmith One', sans-serif;
  color: #7d521e;
  font-size:32px;
}

p {
  text-align: center;
  color: #966429;
}
/* 	Overlay Banner */
/*	---------------------------------------------------- */

.overlay-ribbon {
  position: absolute;
  width: 13em;
  height: 14em;
  z-index: 9999;
  top: 0;
  right: 2%;
  background: #2ec4b6;
  padding: 5px 0;
  /* IE10 Consumer Preview */
  
  background-image: -ms-radial-gradient(center top, circle farthest-side, #cbf3f0 0%, #2ec4b6 100%);
  /* Mozilla Firefox */
  
  background-image: -moz-radial-gradient(center top, circle farthest-side, #cbf3f0 0%, #2ec4b6 100%);
  /* Opera */
  
  background-image: -o-radial-gradient(center top, circle farthest-side, #cbf3f0 0%, #2ec4b6 100%);
  /* Webkit (Safari/Chrome 10) */
  
  background-image: -webkit-gradient(radial, center top, 0, center top, 487, color-stop(0, #cbf3f0), color-stop(1, #2ec4b6));
  /* Webkit (Chrome 11+) */
  
  background-image: -webkit-radial-gradient(center top, circle farthest-side, #cbf3f0 0%, #2ec4b6 100%);
  /* W3C Markup, IE10 Release Preview */
  
  background-image: radial-gradient(circle farthest-side at center top, #cbf3f0 0%, #2ec4b6 100%);
  -webkit-box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
  box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  
  animation: slidein 3s ease-in-out forwards;
}

.ribbon-content {
  z-index: 99999;
  position: relative;
  margin: 0 5px;
}

.ribbon-content h3 {
  margin: 0;
  padding: 5px 0 5px 0;
  line-height: 16px;
  font-family: 'Hammersmith One', sans-serif;
  color: #24505a;
  text-align: center;
}

.ribbon-content > p,
.ribbon-content > p span {
  color: #24505a;
  margin: 0;
  padding: 0;
}

.ribbon-content p span {
  display: block;
}

.close-x {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 99;
}

.close-x a:link,
.close-x a:visited {
  background: #2ec4b6;
  color: #fff;
  padding: 0 4px;
  font-weight: normal;
  text-decoration: none;
}

.close-x a:hover {
  background: #ff9f1c;
}

.overlay-ribbon:before {
  content: "";
  position: absolute;
  bottom: -9em;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10em solid #2ec4b6;
  border-right: 10em solid transparent;
  z-index: 997;
}

.overlay-ribbon:after {
  content: "";
  position: absolute;
  bottom: -9em;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10em solid #2ec4b6;
  border-left: 10em solid transparent;
  z-index: 998;
}

.slideout {
  animation: slideout 1s ease-in-out forwards;
}

@-webkit-keyframes slidein {
  from {
    transform: translate(0, -400px);
  }
  to {
    transform: translate(0, 100px);
  }
}

@-o-keyframes slidein {
  from {
    transform: translate(0, -400px);
  }
  to {
    transform: translate(0, 100px);
  }
}

@-moz-keyframes slidein {
  from {
    transform: translate(0, -400px);
  }
  to {
    transform: translate(0, 100px);
  }
}

@keyframes slidein {
  from {
    transform: translate(0, -400px);
  }
  to {
    transform: translate(0, 100px);
  }
}

@-webkit-keyframes slideout {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, -400px);
  }
}

@-o-keyframes slideout {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, -400px);
  }
}

@-moz-keyframes slideout {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, -400px);
  }
}

@keyframes slideout {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, -400px);
  }
}

$(function() {
  $("#close").click(function() {
    $('.overlay-ribbon').addClass("slideout");
  });

});