Grow your CSS skills. Land your dream job.

Best way to tackle this

  • # April 30, 2013 at 9:57 am

    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

    # April 30, 2013 at 9:57 am

    Sorry the link would help

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

    # April 30, 2013 at 10:20 am

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

    # April 30, 2013 at 10:24 am

    That tablecloth can be done via CSS3 gradients.

    # April 30, 2013 at 10:45 am

    >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

    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

    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

    # April 30, 2013 at 11:11 am

    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

    > 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

    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

    @Senff Agree to disagree.

    # May 1, 2013 at 7:22 am

    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.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".