Best way to tackle this

[Ricky55]

Hi Guys

I’ve been given this design to code into a WP theme.

I’m just wondering how you would go about achieving the Table Cloth at an angle?

I realise that this design is over reliant on images but the client loves it.

Just would like to get a few ideas.

Cheers

[Ricky55]

Sorry the link would help

https://dl.dropboxusercontent.com/u/508261/Cake%20Detail%20Page.jpg

[Paulie_D]

Single background image would seem to be the answer with the wood & tablecloth together.

[chrisburton]

That tablecloth can be done via CSS3 gradients.

[Paulie_D]

>That tablecloth can be done via CSS3 gradients.

Sure…but is it worth it?

Sometimes an image is the right answer. This would seem to be the case here.

[chrisburton]

I don’t particularly care for the design either way but why wouldn’t it be worth it? You can use gradients for the tablecloth and an image for fallback.

[Ricky55]

If you look carefully at the cloth its not regular so I don’t think it could be done in CSS, sure I could make it look similar.

I’m not overly convinced by CSS gradients anyway. Sometimes the code weight can add up to more than the image. I suppose its one less HTTP request.

I’ve tried a large div with a repeating image for the cloth and that works fine with rotate. Its just whether I use rotate and a repeating image or just a large image to create the whole cloth that would at least look ok in browsers that don’t support rotate.

I was planning on making the body have the wood background.

Always interesting to see how others would do things.

I might just go for rotate and sack off IE 7 and 8.

Cheers guys

[chrisburton]

What do you mean it’s not regular? You mean the squares being irregular in size? That looks like a mistake on the graphic designer’s part.

Well, you wouldn’t need to support IE7 or IE8 unless your analytics show they are important.

[Senff]

> You mean the squares being irregular in size? That looks like a mistake on the graphic designer’s part.

Doesn’t seem like a mistake, I think it’s just to make things more natural.

I would just use an image that’s already rotated and has some transparency, instead of a straight one and rotate it with CSS.

[Paulie_D]

Why even bother with the rotate?

Use the wood bg image on the `html` tag and a suitably positioned png of the tablecloth in it’s current configuration on the `body`.

I assume that they are available as two images?

[chrisburton]

@Senff Agree to disagree.

[Ricky55]

Senff you are correct, its not a mistake its so the cloth looks like a fabric. So the lines are not uniform.

Anyways I think I’ll go with what you have suggested Paulie. I’ve been experimenting a little with the transform rotate and it seems to give varying results.

Thanks for all the comments.

[Author]

Posts