Grow your CSS skills. Land your dream job.

Need to know if this design is feasible

  • # December 3, 2011 at 1:15 am

    Thanks for reading. I’m actually finding this issue a bit difficult to articulate so please bear with me!

    I’m not sure one part of this design is feasible. The main content sits atop a kind of gradient trapezoid. Which all sits on top of a background image.

    I’m not sure how to go about getting the design to scale appropriately – vertically with the trapezoid shape. In the image I’ve included – I’ve got 2 columns, approximately 4 paragraphs in size. A footer also sits below that. However, what happens when I have a page that is 3 times as long? I’m not sure how I could set-up the css to redraw the trapezoid accordingly/show the appropriate amount when needed, etc..

    Here are some additional images of the elements

    # December 3, 2011 at 3:07 am

    Please go back and add a width to these images.

    # December 3, 2011 at 3:28 am

    thanks Steven. Auto-resizing was on earlier, but seems to not be on now.

    # December 3, 2011 at 7:56 am

    you haven’t really finished describing the problem – what do you want to happen when the page is 3 or 4 times longer?

    # December 3, 2011 at 12:40 pm

    Wolf, I would like the trapezoid to scale vertically as needed – as a background to the main content.

    # December 4, 2011 at 9:06 pm

    Here’s the trapezoid:

    background-image: linear-gradient(10deg, #000000 0%, #444444 76.9999%, #000000 77%, #020101 100%);

    . . . And the Circle:

    background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(0,0,0,0.58) 100%);

    # December 5, 2011 at 1:42 pm

    @cnwtx, I don’t think CSS 3 is the way to go here, as I need site support amongst IE 7 & 8. Though I’m reading there is limited support for gradient transitions in some versions of I.E. – a bit more research to do then!

    # December 5, 2011 at 9:29 pm

    You could try this: CSS3Pie. Otherwise you’d need to use SVG.

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

You must be logged in to reply to this topic.

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