Jump to content
lcot17

Smooth Wavy/Skew Background Sections

Recommended Posts

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

Section Breakup.png

Share this post


Link to post
Share on other sites

might be some fancy ways of doing it but i would probably use an svg  as a background image and let it scale with the container - others might have a cleverer way of doing it:)

Share this post


Link to post
Share on other sites

I think SVG would be the way to go. Using the border-radius property would be a possibility, but since as far as I know it isn't possible to create a double curve in CSS, you would need multiple pseudo elements to achieve this. You might even be able to do this using a radial-gradient as a background image, but again I would suspect you would need pseudo elements. It's actually quite a tough shape to create, I had a go using the two CSS methods I mentioned above and couldn't get that close. 

The background gradient on the other hand is no problem. Use a linear-gradient property on a background image, as seen here: 

Code Pen

Linear-gradient is supported by most if not all browser I believe. 

 

Share this post


Link to post
Share on other sites

Hi,

Yeah, I think svg backgrounds on a section are the way to go, you could even take the the negative space approach and use a .svg white vector for above and below to 'knock out' the shape you want, rather than have a colour svg, and fill the area with a bg gradient as above.

Alternatively you could use an inline svg and style that yourself, browser support wise could be limited here though.

Would look amazing with a subtle animation on the waves and/or gradient.

Share this post


Link to post
Share on other sites
2 minutes ago, Ian Ryde said:

Hi,

Yeah, I think svg backgrounds on a section are the way to go, you could even take the the negative space approach and use a .svg white vector for above and below to 'knock out' the shape you want, rather than have a colour svg, and fill the area with a bg gradient as above.

Alternatively you could use an inline svg and style that yourself, browser support wise could be limited here though.

Would look amazing with a subtle animation on the waves and/or gradient.

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

Share this post


Link to post
Share on other sites

if you use the white svg knock out then you can easily use the animated gradient such as https://www.gradient-animator.com/

just check browser support but guessing it's pretty good for modern browsers - just go steady with the animations/ flowing gradients :)

 

Share this post


Link to post
Share on other sites

SVG is definitely the way to go here.  You don't need to use some gradient animator tool, just write some CSS to animate the background-position of a gradient using keyframes.

Linear gradients are supported by all browsers that you should care about https://caniuse.com/#search=grad.  See it as progressive enhancement, old browsers can fallback to a background colour - it does not stop them using the site.

Share this post


Link to post
Share on other sites
18 hours ago, davep said:

@you don't need to use a tool, but it can help ;)

they can, but as web developers we should be learning things like basic CSS Keyframe animations.

Share this post


Link to post
Share on other sites

@rbrtsmithone way of learning is to use tools  and see how the code works, then you can write it yourself ;) sometimes some of us (e.g. me) need a helping hand when doing stuff, though i'm not a developer anyway but a designer who codes :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Playing around with the code is definitely worthwhile but while you do this you want to read the specs too MDN typically has brilliant explanations of not just how things work but why https://developer.mozilla.org/en-US/docs/Web/CSS/%40keyframes

Essentially you want a good mix of practical and theory.  Once you understand a spec it will open up many creative doors for you.

Share this post


Link to post
Share on other sites
41 minutes ago, lcot17 said:

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.

With SVG you can apply CSS to parts of it via selectors just like any other DOM node.


 

.my-svg-element {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}

Or you can use repeating gradients too https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

You can also apply gradients to the SVG directly in the markup https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients


Going back to the OP's post I'd put a gradient on the section at the bottom, then overlay that with two SVGs with white fills to give the effect illustrated.  The background-position property can then be transitioned using CSS Keyframes.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • By colinbrazier
      Hi everyone,
      My dropdown multi-level menu at www.fobgfc.org doesn't work with touch devices.  It doesn't drop down at all.  Basically because it makes use of :hover.
      I'd like the functionality to behave like the menu on www.chipsteadfc.org.uk
      I will consider using jQuery.  
      How's best to do this please?
      Cheers,
          Col
    • By Seth
      Hey
      I can't find the CSS style to style this button. You can find it on https://ashleyassists.mystagingwebsite.com/social-media/

    • By RobDoyle
      I am curious as to the difference between the two and when one should be used over the other. Thanks.
    • By brockmanig
      Hi there,
      its a simple html document,  made with neatbeans 8.3, on windows 10
      and i only use html + css.
      There is a content id which has a background like:
      #content { width: 50%; height: auto; background-color: transparent; float: right; margin-top: 2%; margin-right: 6%; margin-bottom: 5%; padding: 1px; background-image: url('Pic123.png') ; background-repeat: no-repeat; background-size: cover; background-position: top center; After this code was ready, it worked and still works, with each browser. Then
      - I made a copy of the html doc,
      - did not change any html or css code,
      - except the text within the html-doc- content.
      But Pic123 is not shown/presented with its full strukture. Looks like the browser tooks just a stripe from the middle of that pic and spread it over the whole content-space. (Imagen a pic at a wall, with a huge bold frame around and within just whitepaper with any type of texture. ) I'm the browser, i cut off the frame, also whats next to it and strech it now till it fits the content space.
      I have no Idea what might be the reason.
       
       
       
       
       
    • By Dragonknigh
      I'm trying to create this site and this is the code I have right now. How do I make a container and place it just like on the "this site"? How do I insert an image instead of  "go to site" button? And make it all responsive just like on "this site"?
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,712
    • Most Online
      4,970

    Newest Member
    adabo
    Joined
  • Forum Statistics

    • Total Topics
      65,782
    • Total Posts
      454,599
×