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

#html #css

#HTML #css

Вопрос:

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

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

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

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

Спасибо

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

1. О, и вы можете добавить body{ margin: 0; } , чтобы предотвратить белую рамку. 😉

2. Hrm, я только что заметил, что вы все еще используете изображение для частичного белого круга внизу. Возможно , вы сможете закодировать этот круг, используя чистый CSS3, но я думаю, что это не стоит затраченных усилий. Если вам не нужна поддержка IE 7 или более поздней версии, вы можете использовать URI данных для встраивания изображения.

3. большое спасибо! Вы спасаете жизнь !… Спасибо, что нашли время помочь. 🙂

Ответ №2:

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

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