Hand drawn lines/borders using CSS3
# February 21, 2013 at 4:51 am
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?# February 21, 2013 at 7:46 am
Yeah I think I’ll go for border-image. Here is an example of how it should look:
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:
(probably not great in many browser yet though!)
Would you use canvas for the book pages curves?
Chris# February 21, 2013 at 8:39 am
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.
You must be logged in to reply to this topic.