Thursday, August 19, 2010

How did pandora.com do its web background?

If you are not familiar with the much-talked about web 2.0 site Pandora, see www.pandora.com.





What interests me is their offbeat web background. How did they pull that off? Any designers want to help here?

How did pandora.com do its web background?
Actually is not that simple as a "curvy green area". Tip: If you're not a web developer you shouldn't speak.





Anyway, this background it's a mix of 3 images. All of them being positioned using CSS. Important: Basic knowment of CSS will be required.





The first image is the %26lt;body%26gt; background, wich is just the left green bar. The CSS here force it to repeat just in the "y" axis (background-repeat: repeat-y;)


http://www.pandora.com/images/background...





The second image have been put in a container (div), wich is positioned at the top of the page showing an horizontal bar. This way, the designers made a 2 background visual effect. Again, the background repeats, but this time in the "x" axis (background-repeat: repeat-x;)


http://www.pandora.com/images/background...





The last image is the weird corner. It have also been put in a container (div) aligned to the top-left. This background won't repeat (background-repeat: no-repeat;)


http://www.pandora.com/images/background...





The mix of 3 gives the impression of a simple funny background, but as you can see, is just an illusion made of 3 different elements.
Reply:Are you serious??? Its an imge of a curvy green area. It' not Offbeat.

dentist

No comments:

Post a Comment