- This topic is empty.
-
AuthorPosts
-
February 21, 2013 at 4:51 am #42895chrisjbParticipant
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 #125498Paulie_DMemberWithout 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 #125513chrisjbParticipantHi 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,
ChrisFebruary 21, 2013 at 7:57 am #125515chrisjbParticipantHi 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 #125517Paulie_DMemberYeah…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 #125522wolfcry911ParticipantLove the design!
I’d use a background image and not think twice about it.
February 21, 2013 at 8:18 am #125523Paulie_DMember>Love the design!
Sorry…I should have said….me too!
February 21, 2013 at 8:35 am #125525Paulie_DMemberHere you go…http://codepen.io/Paulie-D/pen/aczpe
February 21, 2013 at 8:39 am #125526chrisjbParticipantOK 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,
ChrisFebruary 21, 2013 at 11:30 am #125550Kitty GiraudelParticipantLovely 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.