The header area of my web page is white. Then below that there is blue call to action area. The two distinct blocks of colour are separated by a straight edge.
However I thought it might be quite nice if the edge was slightly wavy -- as though the blue area had been kind of hand painted.
I'm not quite sure however, how this could be achieved, without extra mark-up or background images. Maybe with some wonky looking borders repeated somehow using :before?
Can you see the slightly wonky edge between the header at the top and the blue area? I'm thinking about maybe trying that, or possibly just keeping a straight edge.
I'm also thinking about adding those curves at the bottom of the screenshot. I'm not quite sure how I'll add those either! I tried using a white border-radius with a blue border-radius over the top, but it wasn't perfect. I might have to use canvas.
It's a simple design, with just a few quite difficult parts! It is in development here:
OK thanks guys. And thanks for compliments :) I think I will use a background image. Only problem is I have to produce several different ones, for the different sizes! Plus it is extra queries for the page load. I think I also need different resolution images for retina display, so I will look into that. I need to do that for the logo anyway.
The header area of my web page is white. Then below that there is blue call to action area. The two distinct blocks of colour are separated by a straight edge.
However I thought it might be quite nice if the edge was slightly wavy -- as though the blue area had been kind of hand painted.
I'm not quite sure however, how this could be achieved, without extra mark-up or background images. Maybe with some wonky looking borders repeated somehow using :before?
Without extra mark-up it'll be hard and borders are always straight (border-radius is essentially just an illusion).
Although browser support is not very deep I would think about border-image.
Do you have some sort of image to show us what you are after?
Hi Paulie_D,
Yeah I think I'll go for border-image. Here is an example of how it should look:
http://stylewired.com/nicehair-new/Feb-2013-redesign-with-Book-look.png
Can you see the slightly wonky edge between the header at the top and the blue area? I'm thinking about maybe trying that, or possibly just keeping a straight edge.
I'm also thinking about adding those curves at the bottom of the screenshot. I'm not quite sure how I'll add those either! I tried using a white border-radius with a blue border-radius over the top, but it wasn't perfect. I might have to use canvas.
It's a simple design, with just a few quite difficult parts! It is in development here:
http://stylewired.com/nicehair-new/
(probably not great in many browser yet though!)
Would you use canvas for the book pages curves?
Thanks, Chris
Hi Paulie_D,
No that is my design! Here is the dev site:
http://stylewired.com/nicehair-new/
The screenshot has had the desired outcome added using Photoshop. That is what I'm trying to achieve now.
Yeah...sorry...I deleted my previous comment.
No...sometimes the easiest option is the most obvious....use an image. I would.
Love the design!
I'd use a background image and not think twice about it.
Sorry...I should have said....me too!
Here you go...http://codepen.io/Paulie-D/pen/aczpe
OK thanks guys. And thanks for compliments :) I think I will use a background image. Only problem is I have to produce several different ones, for the different sizes! Plus it is extra queries for the page load. I think I also need different resolution images for retina display, so I will look into that. I need to do that for the logo anyway.
Many thanks Paulie_D and wolfcry911.
Cheers, Chris
Lovely design. If you want to be a hackzor, you could use some SVG. But the easiest and probably best solution is to use an image.