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 Randallrbaker
      Here is my website. www.vibe432.com  please check every link and every possible page ans let ne know whats wrong. Id  evenlike to have the responsiveness looked at too. Im having someone do the css and html for me so i need to tell them exactly what wrong and why it's wrong. 
    • By 98sfsdf8
      Hi all,
      I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like:
      - to be able to have images of different heights and widths, not all the same size (as it is now).
      - vertically/horizontally centered.
      Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/
      Thanks!
      HTML:
      <div id="contentwrapper">       <div class="centreme">         <img src="https://picsum.photos/200/200?image=1" id="animation" />         <img class="hidden" src="https://picsum.photos/200/200?image=1" />         <img class="hidden" src="https://picsum.photos/200/200?image=2" />         <img class="hidden" src="https://picsum.photos/200/200?image=3" />         <img class="hidden" src="https://picsum.photos/200/200?image=4" />         <img class="hidden" src="https://picsum.photos/200/200?image=5" />         <div id="bottommark"></div>       </div>     </div> CSS:
      body,       html {         height: 7000px;         margin: 0;         background-color: grey;       }       .hidden {         position: absolute;         top: -9999999px       }       #bottommark {         position: absolute;         bottom: 0;       }       #contentwrapper {         width: 100%;         height: 100%;         position: fixed;       }       .centreme {         position: fixed;         width: 200px;         /* the image width */         height: 200px;         /* the image height */         top: 50%;         left: 50%;         margin-top: -100px;         /* half the image height */         margin-left: -100px;         /* half the image width */       } JS:
      $(document).ready(function() { var a = $(document).height(); var b = a - $("#bottommark").position().top; $(window).scroll(function() { var e = $(document).height(); var f = $(window).scrollTop(); var c = e - $("#bottommark").position().top - f; var d = b / 5; $("span").html(c); if (c > d * 4) { $("#animation").attr("src", "https://picsum.photos/200/200?image=1") } if ((c < d * 4) && (c > d * 3)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=2") } if ((c < d * 3) && (c > d * 2)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=3") } if (c < d * 2 && c > d * 1) { $("#animation").attr("src", "https://picsum.photos/200/200?image=4") } if (c < d) { $("#animation").attr("src", "https://picsum.photos/200/200?image=5") } }) });  
    • By charlyanderson
      Hello everyone :)
      I am working on a grid type layout and really having troubles and hoping someone might be able to help.
      The background colours should be full width whilst the content should be contained and have a max-width. I have managed to extend the background colours outside of the content areas by absolutely positioning them. This however, doesn't work when there is more than two blocks per row.
      I have attempted this about 20 times and cannot figure out how to achieve this on a responsive website. Can anyone help.
      Attached is a very basic example of what I am trying to achieve.
      Thanks in advance.

    • By Luke Ottey
      @Seth and I are working on a website that uses Envira-gallery and are unable to use CSS code to move the image caption (which is currently located in a white font in the top left) of the front-page gallery images to below the bottom border of the image (in order too see the caption you have to first click on the image). We are looking for a way to center the caption below the image in the same spot regardless of what the viewport size is. Here is a link to the page: https://webdesignstaging.site/firstfloorflow/
      Any help would be wonderful, thanks so much!
    • By carloswebwdf
      Hello !!
      Following the instructions from the site 'W3Schools', I created one dropdown menu in javascript, like shows in the link below:
      http://www.terezanininha.com.br/Exemplo_proprio_4.html
      But what I need, for exampple, after click in the button and show de list, at mouseover on the link 'Link2' for example, shows another list in the right
      side with more link options !!
      How Can I do that ??
      Wating answer...
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,433
    • Most Online
      4,970

    Newest Member
    f9ariel
    Joined
  • Forum Statistics

    • Total Topics
      65,748
    • Total Posts
      452,965
×