- This topic is empty.
April 30, 2013 at 9:57 am #44468
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.
CheersApril 30, 2013 at 9:57 am #133603
Sorry the link would helpApril 30, 2013 at 10:20 am #133604
Single background image would seem to be the answer with the wood & tablecloth together.April 30, 2013 at 10:24 am #133605
That tablecloth can be done via CSS3 gradients.April 30, 2013 at 10:45 am #133606
>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.April 30, 2013 at 11:08 am #133608
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.April 30, 2013 at 11:08 am #133609
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 guysApril 30, 2013 at 11:11 am #133611
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.April 30, 2013 at 11:29 am #133615SenffParticipant
> 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.April 30, 2013 at 11:30 am #133617
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?April 30, 2013 at 11:42 am #133619May 1, 2013 at 7:22 am #133711
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.
- The forum ‘Other’ is closed to new topics and replies.