Question

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

我尝试利用CSS3实现边界影子,并用菜单为背景,在上。但是,它只是想像这样的。当我尝试使用图像时,它几乎是完美的。但我想利用CSS3来实现这一目标。

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%);
}

这种背景的颜色可能并不准确(我觉得像发射PS仅仅与颜色相匹配),但你可以很容易地利用 ,最终的CSS Gradient Generation/a>。

Answer 2

As far as I m concerned your version of the menu doesn t look too different, in fact if you inspect css mania s stylesheet files they re only using text-shadow declarations on the elements, everything else is achieved with images. Hope you find my comments helpful!

友情链接