Bridging the Gap Between Photoshop and your Web Browser

No Compromise Design

We’ve got a good bunch of designers in our office. They churn out excellent design after excellent design and their websites are a pleasure to convert into HTML/CSS. But with excellent design comes complicated elements – rounded corners, drop shadow, transparency – and even more complicated mark up. A while ago I was presented with this content box:


(image: https://www.superdream.co.uk/wp-content/oldblogs/2009/12/photoshop_in_your_web_browser_01.png alt: The content box of a true design maverick)
The content box of a true design maverick

So what is the best way to mark up this design? Well, here’s the problem.

1. **We need these boxes to work across browser**. CSS3 would allow us to add the drop shadow, transparency and rounded corners using code alone. But, despite all of the competant web-browser developers supporting **CSS3**, and Microsoft promising us IE9 sometime in 2010, your average user seems unwilling or unable to upgrade from Internet Explorer 6. So that rules that method out.
2. **We want the content to be dynamic.** Yes, it would be possible to put every image into photoshop and physically apply the green border, shadow and transparency to it, but we want to be able to change the images dynamically from our Content Management System. So that rules out that method.
3. **We don’t want to have to depend on our CMS**. One method that could be used would be to create an image of the border, with rounded corners et al. and, when an image is uploaded to the site, overlay this on top using (link: http://www.google.co.uk/url?sa=t&source=web&ct=res&cd=1&ved=0CAcQFjAA&url=http%3A%2F%2Fphp.net%2Fmanual%2Fen%2Fbook.image.php&ei=2FMqS-SCLY6t4Qb6_6iOCQ&usg=AFQjCNHlpHKAeVher7O9yEBlWalQD0ig&sig2=Z5YbLrSLA-Xlcai_o4UBTA text: GD popup: true title: GD) or (link: http://www.google.co.uk/url?sa=t&source=web&ct=res&cd=1&ved=0CAcQFjAA&url=http%3A%2F%2Fwww.imagemagick.org%2F&ei=_lMqS7iVCtGx4Qb4gYWVCQ&usg=AFQjCNEj86ZXrN6Iqx9rZ73Ad4L4ypmDtQ&sig2=xt1RjNSp-aVS_vnFGMJmcw text: ImageMagick). However, ideally we want to be able to mark this up ourselves, without having to use the CMS to provide us with our image. So that rules out that method.

The Solution: A layered approach to Web Design

I am proud to say that I have found a use for **absolute positioning**! What we are going to do is take the above design and split it into it’s seperate layers, a lot like the designer would do in photoshop. Then we can layer them one on top of the other, meaning that for each content box all we have to do is copy the last one and change the image, title text and body text. Here are the layers we will use:

1. **The border**: This is the border or frame, which has a green border with rounded corners and a drop shadow below it. I have included the cream background to show the drop shadow and to cover up the content underneath, so this colour will have to change to reflect your design.

(image: https://www.superdream.co.uk/wp-content/oldblogs/2009/12/content_box_01.png alt: content_box_01)
2. **The title block**: This will consist of a div with a background image which contains the text “Barbeque Boxes” (the text is dynamic and not part of the image).

(image: https://www.superdream.co.uk/wp-content/oldblogs/2009/12/content_box_02.png alt: content_box_02)
3. **The text block**: A one pixel, transparent green background image that is repeated, with the text inside (again, dynamic).

(image: https://www.superdream.co.uk/wp-content/oldblogs/2009/12/content_box_03.png alt: content_box_03)
4. **The image**: The main image, contained inside an tag to keep google happy!

(image: https://www.superdream.co.uk/wp-content/oldblogs/2009/12/content_box_04.png alt: content_box_04)

And here’s the mark up:

### The HTML

Main Title**Hampers**Lorem Ipsum watsit Sumut or Nuthin itsy bitsy teeny weeny tons and tons and loads of text to fill the gap.

### The CSS

.contentBox{ /*Define the main containing Div*/ display:block; float:left; width:304px; height:395px; position:relative; margin:0 17px 17px 0; text-decoration:none; } .contentBox .titleBlock{ /*Position Absolutely*/ position:absolute; /*Layout the title*/ width:200px; height:41px; top:2px; left:2px; padding:13px 0 0 8px; /*Add the main content image*/ background-image:url(images/frontpage/blockWithRoundedCornerImage.png); /*More Styling*/ color:#59592c; font-weight:bold; font-size:14px; } .contentBox .textBlock{ /*Position Absolutely*/ position:absolute; /*Layout the text block*/ width:277px; height:135px; margin:2px 0 0 2px; padding:15px 0 0 15px; /*Place it 233 pixels from the top*/ top:233px; /*Add the one pixel image*/ background-image:url(images/semiTransparentOnePixelImage.png); background-repeat:repeat; /*More Styling*/ color:#efe3c6; } .contentBox .textBlock #textContent, .contentBox .textBlock strong{ font-size:12px; color:#efe3c6; } .contentBox .imageFrame{ /*Position Absolutely*/ position:absolute; /*Define Dimensions*/ width:304px; height:395px; /*Add the frame image*/ background-image:url(images/mainImage.png); } .contentBox .image{padding:2px 0 0 2px;}

The layering is sorted out by the order in which we have added the divs but if you need to change the order, or you are having trouble with it, then you can always experiment with (link: http://www.w3schools.com/cssref/pr_pos_z-index.asp text: z-index).

The great thing about this method is that there is as little compromise as possible. It would be wrong for the designers to compromise their designs for the sake of making the developer’s life easier, but at the same time we are making the implementation of the design as practical, usable and SEO friendly as possible, as well as easy to implement and re-create for the next time a tricky design is sent our way!