Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hand drawn lines/borders using CSS3

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #42895
    chrisjb
    Participant

    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?

    #125498
    Paulie_D
    Member

    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?

    #125513
    chrisjb
    Participant

    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

    #125515
    chrisjb
    Participant

    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.

    #125517
    Paulie_D
    Member

    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.

    #125522
    wolfcry911
    Participant

    Love the design!

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

    #125523
    Paulie_D
    Member

    >Love the design!

    Sorry…I should have said….me too!

    #125525
    Paulie_D
    Member
    #125526
    chrisjb
    Participant

    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

    #125550
    Kitty Giraudel
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.