Having seen a million rounded corner techniques, in the past. I used my minimal css knowledge to "create" my own.
Personally I love nifty corners, but when you want to use a background image, and not just a colour they just don't cut it.
Now if you look around my site, in anything other than IE, you will see it looks pretty crap, I've learned a lot about css in that time, and my skills nowadays are significantly better, honest.
So lets begin. This is my New websites header image, nice don't you think?
So I've round the corners on a photo in photoshop, not quite the whole story.
The green box on the left is part of the background image, but the right side is actually a floated div, containing a transparent png(gif's can also be used to allow it to work better with older browsers).
Now to achieve this I simply created a div that was located inside the "main" div where I have the background picture located. So the html looks like this
div class="header">
div class="header_curve">/div>
p>a href="#">Russian Space Station/a>/p>
p> /p>
/div>
Blogger wasn't rendering this right, so i remove the front of the tags to show you
The "header_curve", is used like a sliding scale, so it pushes against the right margin, and so expands and contracts with the parent element. To do that I used the following css
.header{
height:500px;
background:url(images/headerc.jpg) no-repeat;
}
.header_curve{
float:right;
height:300px;
width:20px;
background:url(images/curves.png) no-repeat;
}
The "header" class provides the height need to show the all of the image, and the image. While the latter class, contains the image we will use to cover up the right end of the image.
So what do the core images look like?
Well here's the background image
And here's the curve image
I've coloured it black, but you should make it what ever color your background is.
Ok, thats great, but there is one problem, the slider will slide right off the div and into who knows. To stop that we use "max-width" in the parent(or in the body tag like i have) element to limit the elements width, however our good friend ie6, doesn't support this property, but Opera & firefox do. I haven't tested it yet, but if fairly safe to assume safari and ie7 do. With a bit of JavaScript this issue could be solved.
Example time...
Now because of the way this blog's layout is designed, the content width is fixed, so anything I show you example wise will be static what ever :(, so blame me the bad designer, I had about 4 days worth of css knowledge when I built this...
So to show you here's a series of screenshots taken in opera, firefox, and ie6 to show what "my" technique does.
To wrap up, there a few things I should point out
This technique is best used with graphical headers, and not content(in my opinion at least)
If this is old, it's news to me, as far as I'm concerned I've never seen it anywhere else.
I don't consider my self a css whiz kid, I'm just a (big)kid
This isn't the best tutorial in the world, but I'm too busy to spend time making a real nice one, besides, my site sucks currently i'm better off spending time fixing it.
Finally if you have any questions leave a comment, and I'll try and get back to you.
Also if your wondering who the hell am I, I go as Veritech on Digg, and practically everywhere else on the web, I'm a 19 year old aspiring/professional web developer/programmer and a law dropout. I currently maintain some of the intranet sites for the one of the largest electrical retail companies in the UK, and that's me pretty much.
