View Full Version : How is this web site technique done?

Finland Blue
01-03-2011, 10:26 AM
I've been looking at this travel web site : http://www.norwaynutshell.com/

Can anyone advise, how the technique of the big pictures at the top of the page is done? Is there a plain rectangular JPG for the main image, and then some layers on the top (eg, the "title" plus the "read more button" and its pale opaque background). And the orange menu on the right side which appears "folded" - how is that effect achieved?

01-03-2011, 03:52 PM
Basically you've got the right idea about the info on top of the big pictures at the top. Although it's all wrapped up in a fairly fancy javascript rotator.

The "folding" is just a matter of creating an image and positioning it properly. In this case there's an absolutely positioned div with the fold (with transparency) over the top of the rest of the page.

01-03-2011, 08:11 PM
If you break it down it's not complicated at all it's the transparancy and positioning that make the design seem more complex.

For the slideshow just search google for jquery slideshows.

If you don't already use firefox I'd grab yourself a copy and download the free extension firebug. This is an excellent tool for analysing the make up of web pages.