Grow your CSS skills. Land your dream job.

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 5:06 am

    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?

    # February 21, 2013 at 7:46 am

    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

    # February 21, 2013 at 7:57 am

    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.

    # February 21, 2013 at 8:00 am

    Yeah…sorry…I deleted my previous comment.

    >Would you use canvas for the book pages curves?

    No…sometimes the easiest option is the most obvious….use an image. I would.

    # February 21, 2013 at 8:13 am

    Love the design!

    I’d use a background image and not think twice about it.

    # February 21, 2013 at 8:18 am

    >Love the design!

    Sorry…I should have said….me too!

    # February 21, 2013 at 8:35 am

    Here you go…http://codepen.io/Paulie-D/pen/aczpe

    # 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.

    Cheers,
    Chris

    # February 21, 2013 at 11:30 am

    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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".