I'm sure you could apply that look to the image within photoshop, but that would make your image sizes larger, make your page load slower, and lock you into a certain design. There is no positive side to doing it that way. I'd stick with the CSS. Copying and pasting the CSS will literally work after you change it to suit your file names.
@paintba11er89: That's not completely true. Just make sure the image isn't that big. And when you use images, you're for sure it will work in every browser. Also IE7-8.
@thala: So if you don't care about those browsers, take the CSS3 approach I posted, otherwise use the image and make sure the file is really small.
http://i.imgur.com/rqhr9.png
Thanks much.
http://jsfiddle.net/PCCZ8/
Like i have all the images for the navbar from the psd!
@thala: So if you don't care about those browsers, take the CSS3 approach I posted, otherwise use the image and make sure the file is really small.
I suppose the best option would be to take the image that is 'behind' the white box and apply that as a background image of the menu div.
The rest is just styling the ul...no? I'm assuming it's a single line menu with no dropdowns?
Without access to the PSD it's hard to help further.
Here is the psd of the navbar, if any one wished to help further..
https://www.dropbox.com/s/hq756r34oyq4bem/template.psd
Thanks a lot!
https://dl.dropbox.com/s/hq756r34oyq4bem/template.psd?dl=1
It is just the same (Also the green background is also not necessary sir)
Frankly, it doesn't matter. You have received some suggestions about how to achieve what you are after but we're not going to do the work for you.
Try coding something in Codepen yourself and if you run into issues that you can't resolve then we can jump in and help.
http://jsfiddle.net/spiritfly/r97Aa/6/
I am having problem with showing the selected navbar, any help would be great.
Cheers.
I don't think Chrome supports a:visited any longer. (security issues)
http://jsfiddle.net/jurotek/r97Aa/68/