CSS Assignment: New Zealand National Parks

My second major assignment with Vision College was to create a website on New Zealand's National Parks using the CSS skills we had been studying.

I used this site to play around with different techniques I was interested in, including some CSS3 properties. One of the first things I wanted was a transition for the hover in my main menu, with the tab rising up as though you were pulling it out. I also wanted to use a gradient to give the tabs a more rounded, almost 3D feel.

nav ul li a {  
  height: 30px;
  border-radius: 10px 10px 0 0;
  background-color: #405127;
  background-image: -webkit-linear-gradient(top, #687F37, #405127 90%);
  background: linear-gradient(to bottom, #687F37, #405127 90%);
  -webkit-transition:height 500ms, background-color 500ms;
  transition: height 500ms, background-color 500ms;

nav ul li a:hover {  
  background-color: #6A7B45;
  background-image: -webkit-linear-gradient(top, #A9A868, #6A7B45 80%);
  background: linear-gradient(to bottom, #A9A868, #6A7B45 80%);
  color: #302508;
  height: 50px;


The transition property happens on the a tag rather than the hover so that the transition effect occurs in both directions. If it was on the hover instead then you would only get the transition when you hovered over the element and not when you moved away again.

The assignment required a gallery with a lightbox and we were given a jquery plugin we could use but I had found a method just using CSS (based on the CSS3 Lightbox) so was keen to try that out. It took a bit of playing around with to get it to work how I wanted but was pretty exciting once I got it working. I love a challenge!