Question

I am trying to use CSS3 instead of images to code the menu in http://www.cssmania.com/ .

My code so far (& the images+styles) can be found here:
http://sarahjanetrading.com/js/j

I tried using CSS3 to achieve the border shadow and the menu li a background to match the one in http://www.cssmania.com. But it just doesnt look the same. When I tried using images, it looked almost perfect. But I want to use CSS3 to achieve the result.

I tried inspecting the code on cssmania.com, but couldnt find the ones for the menu border to make it look the way it is, and the menu li background. I just want the code for these two functions.

Thanks

Answer 1

The main thing I see that stands out different is the background of the links. There’s a subtle gradient on the original design, and that’s missing from yours. It’s also why the borders look different – the gradient is on the color, not the borders, but your eye is tricked.

Add this to the stylesheet:

#header-mania .header {

    /* Keep everything *except* the original background */

    background: #7fa445;
    background: -moz-linear-gradient(top, #7fa445 0%, #6b9632 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fa445), color-stop(100%,#6b9632));
    background: -webkit-linear-gradient(top, #7fa445 0%,#6b9632 100%);
    background: -o-linear-gradient(top, #7fa445 0%,#6b9632 100%);
    background: -ms-linear-gradient(top, #7fa445 0%,#6b9632 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fa445', endColorstr='#6b9632',GradientType=0 );
    background: linear-gradient(top, #7fa445 0%,#6b9632 100%);
}

That background’s color might not be exact (I didn’t feel like firing up PS just to match the colors), but you can adjust the colors easily using the Ultimate CSS Gradient Generator