Alright. I can see it.
Those are quite beautiful navigation bars.
The way to achieve such an effect is through a background-image. You may be able to achieve such an effect via pure CSS3, but that'd be very difficult and isn't something that I think you want.
This effect has been achieved with a background-image. It was most likely done in a program like Photoshop or GIMP. I won't go through exactly how to achieve this, as it's equally if not more complicated than this tutorial. If you want help, post a new thread or ask in here.
Step 1 - Basic HTML layout
The basics of the HTML layout will be an unordered list. This is how most navigation bars are done, so you should become acquainted with them.
You'll want something like this (assuming you've finished all of the <head> stuff, etc):
That's all! Now for the CSS:
border:1px solid #00FF00;
And that's it. Substitute the values that you want. Substitute yourbackground.jpg with the background image of your choice.
I don't know how much of a tutorial that was so much as an explanation of what to do. Post if you have questions about certain things I did.
There is one problem that I, myself, would like the answer to. I can't figure out a way to stop there being space between the different list items. How do I fix that?