Использование CSS3 вместо изображений для достижения желаемых результатов

Question

Я пытаюсь использовать CSS3 вместо изображений для кодирования меню в http://www.cssmania.com/.

Мой код (и изображения + стили) можно найти здесь: http://sarahjanetrading.com/js/j

Я пытался использовать CSS3, чтобы получить тень от границы, и в меню появился фон, соответствующий фону в http://www.cssmania.com. Но это выглядит не так.Когда я попытался использовать изображения, это выглядело почти идеально.Но я хочу использовать CSS3 для достижения результата.

Я попытался проверить код на cssmania.com, но не смог найти код для границы меню, чтобы он выглядел так, как есть, и фон меню.,Я просто хочу код для этих двух функций.

Спасибо

Answer 1

Главное, что я вижу, отличается от других - это фон ссылок.В оригинальном дизайне есть тонкий градиент, и он отсутствует в вашем.Именно поэтому границы выглядят по-разному - градиент на цвете, а не на границах, но ваш глаз обманут.

Добавьте это в таблицу стилей:

#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 только для того, чтобы соответствовать цветам), но вы можете легко настроить цвета, используя Ultimate CSS Gradient Generator

Answer 2

Насколько я понимаю, ваша версия меню не выглядит слишком по-другому, на самом деле, если вы просматриваете файлы таблиц стилей css mania, они используют только объявления text-shadow для элементов, все остальное достигается с помощью изображений,Надеюсь, вы найдете мои комментарии полезными!