Итак, ответ из нескольких частей:
Дизайн кнопок, о котором вы говорите, выполнен в самой графике (поэтому, если вы хотите получить действительно техническую информацию, это не совсем PURE CSS). Пример того, как сделать «блестящий блестящий вид», приведен здесь: http://iris -design.info / photoshop / web-20-style-buttons / Его можно легко адаптировать для получения желаемого образа. Также обратите внимание, что есть несколько сайтов, которые будут создавать драгоценные кнопки, похожие на web 2.0 (я ненавижу этот термин!) Без фотошопа. Просто Google "генератор кнопок Web 2.0"
Чтобы упростить задачу, я предполагаю, что вы используете вложенные теги
для создания меню. Просто установите фон соответствующего элемента списка для вашего изображения, без повтора, и установите высоту и ширину, чтобы они были правильного размера, чтобы соответствовать самому изображению. Вуаля, изображения на заднем плане вместо фона в стиле CSS, которые у него есть в настоящее время.
Улучшение будет заключаться в использовании спрайтов для ускорения загрузки и уменьшения времени отклика. Смотрите здесь для получения дополнительной информации: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
Хорошо, теперь, несмотря на это, множество людей уже напало на этот вопрос, и есть несколько действительно элегантных решений, которые, по сути, сделаны для вас. Подумайте о том, чтобы посмотреть на таких сайтах, как Smashing и т. Д., Чтобы найти готовые решения, которые помогут. Лично я большой поклонник supersucker и меню типа suckerfish, которое Jquery приносит на стол. Хотите ли вы идти по этому пути, конечно, личное предпочтение.
Удачи.