Recently I was contracted to do the back-end coding on an e-commerce site – www.yellowhammerltd.com. This would mark my first real collaborative web project. I was only to write code – I was now part of a team. I was given a Photoshop document with 6 or so layers, literally hundreds of masks, filters and textures. At first glance I was overwhelmed – this was not the way I built websites. There was no web ready structure. There were curves, and shadows – this was created with only the visual in mind – with no inhibitions about limitations in CSS – this was a Challenge.
Yellow Hammer Ltd.
My first thought was that this design was never going to translate into HTML/CSS. My second thought was that I could translate it, just not easily. This challenge was what I needed. I had to think outside of my comfort zone, using divs and floats to their max.
Besides dealing with the original Yahoo! shopping cart system, the most challenging aspect of this design was the bottom menu section. Button’s that had to line up against a curved image. My solution: Saving the images as PNG’s for transparency – up and over state in the same image. Using a floating div, placing the images on the page, and fine tuning the background-image position pixel by pixel until the image lined up. Then using the pixie method the a:hover background-image position reveals the hover state.
Rammer-Jammer, Yellowhammer!
