created by http://livecoding.io/3411676

README.md

View this code at http://livecoding.io/5129901

options.json

{
    "libraries": [],
    "mode": "css",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

#red {
  width: 300px;
  height: 200px;
  
  background-color: #fff; 
  background-image: -webkit-linear-gradient(#666 1.4em, transparent 4.7px);

  
  background-size: 100%;
  
  
  
  border-radius: 10px;
  border:#000 solid 1px;
  
  margin: 30px auto;
  
  -webkit-transition: all 1s ease-out;
  -moz-transition: background 1s ease-out;
  -o-transition: background 1s ease-out;
  transition: background 1s ease-out;
  
}

#red:hover {
  
   background-image: -webkit-linear-gradient(#666 9em, transparent 3px);
  
  background: #666;
  
}

#blue {
  
    background: -webkit-linear-gradient( #000,#FFFFFF);
  
  background: -moz-linear-gradient(#C7D3DC,#5B798E);
    background: -o-linear-gradient(#C7D3DC,#5B798E);
    background: linear-gradient(#C7D3DC,#5B798E);
    
    -webkit-transition: background .2s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    
    background-size:45px 45px;
    
    border: 7.2px solid #839DB0;
    cursor:pointer;
    width: 490px;
    height: 260px;
    margin: 52px auto;
   
}

#blue:hover {
   background-position:0px;
}

water.html

<h1>Hello! Try changing this title. (hint - see the "html" tab)</h1>

<h2>I'm a subtitle. Try changing me!</h2>

<h3>Make these squares bigger! (hint - see the "css" tab)</h3>

<div id='red'>
</div>

<div id='blue'>
</div>