lcot17

Ahhh, forgot about this! Good shout.

I can relate 100% to @davep - I do as much as I can but I learn through seeing and reverse engineering code. I am a designer that can code! I also completely agree that jQuery/similar tools are not the best solution but I've found there have been limitations (or at least limitations to my working knowledge) of CSS and Keyframes. So far, the best idea put forward was the white SVG to knock about the gradient section - this, however, does limit my ability to use different coloured gradient sections one after the over - I am limited to white / gradient / white etc.

Thanks everyone for the suggestions. @Fee, the issue wasn't with creating a background it was just making it blend if the elements were separated out. Personally, I think i'm in agreement with all of you regarding an svg background. @Ian Ryde, I like the idea of using a white svg vector to knock out the top. I think this could be a really effective way to control the shape whilst being able to forget about the height of the section. Regarding your idea behind a subtle animation, that would be incredible! I actually had the same idea myself. This could just be a moving peak CSS animated back and forth on a 300% width background image? But, by all means, if you want to do this then i'll not stop you considering you share your codepen haha

Hi, Calling for some advice/support to put forward a few ideas as to how to best achieve a design I'm working on. I have attached an image outlining a section in a design that has a (not skewed, but similar) wavy curved shape on the top and bottom. The site will have a fixed container grid of 1200px but the height of the content will be variable depending on the viewport width. To make things a little more tricky too, I would like to do this with a gradient. This would cause issues with doing a static image top and bottom and a gradient background for the main content. Could anyone post a few quick codepen ideas to point me in the right direction? Or link me some jQuery/JS-based plugins that would be able to create something close to what I want to achieve. Alternatively, if you have any other suggestions i'm all ears (the gradient could go for example) Thanks