The Lifty Div

A simple chunk of code for a CSS ribbon effect, and a little something to lift your div off the background.

by erick

HTML

<div class="section">
  <div class="ribbon-wrapper">
    <div class="ribbon-front">
      <h1>The lifty div</h1>
      <h2>A story about a div that refused to be two-dimensional</h2>
    </div>
    <div class="ribbon-edge-topleft"></div> 
    <div class="ribbon-edge-topright"></div> 
    <div class="ribbon-edge-bottomleft"></div> 
    <div class="ribbon-edge-bottomright"></div> 
    <div class="ribbon-back-left"></div> 
    <div class="ribbon-back-right"></div> 
  </div>
  <div class="info">
      <div class="authored">
      <div class="date">November 21, 2011 - 14:14 EST</div>
      <div class="person"><a href="#">Tony Montemorano</a></div>
    </div>
  </div>
  <br class="clear">
  <div class="story">
    <p>A little image on the bottom of a div makes it look like it's lifting off of the page. Rather than making the entire thing an image, it makes more sense for sizing to make the top section with just CSS and HTML. This is of course also a good way to keep the page load time down. </p>
    <p>The next step here would be to make the bottom image so that it stretches with the page width or make it usable with different sized sections on the page. I haven't gotten that far yet :)</p>
  </div>
</div>
<div class="page-shadow">&nbsp;</div>

CSS

html,body {height:100%;min-height:100%;}
body {
  margin:30px;
  height:100%;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  background: rgb(167,207,223);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3Y2ZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzUzOGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1)));
  background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
  background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
  background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
  background: linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 );
}

.clear {clear:both;}
.hidden {display:none;}

a {color:#0095CC;text-decoration:none;}
a:hover {color:#00ADEE;}
p, ul, figure, h1, h2, h3 {margin:0;padding:0;}


@media screen {
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Serif'), local('DroidSerif'), url('http://themes.googleusercontent.com/static/fonts/droidserif/v2/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff')...