Xwab
Форумыnavigate_nextHTML/CSS

Реализация кнопок - WEB дизайн
Сообщения
NiceCat

Всем привет, уже не первый раз столкнулся с такой вот реализацией кнопок (см. вложения).
Может кто знает как такое реализовать. Интересует код как в html так и в css.
Т.е. в готовой версии то, что сверху показано стандартно, а то что снизу показывается при наведении мышкой.
Живой пример http://wowsoul.com/ (WEB)

Советовать мне разбирать код на этом сайте не надо, хочется объяснения доступным языком.
Спасибо заранее.
добавлено спустя 22 минуты:
где же дизайнеры/верстальщики)), помогите нубу

17 Дек 2012, 18:41
Векселл

NiceCat, ты ведь говоришь не просто о присвоении :hover других стилей?

17 Дек 2012, 19:12
TOOZ

Ну. Вот CSS код id'а:

#menu_start:hover {
background: url("http://wowsoul.com/templates/wowsoul2/design_img/menu_start.jpg") 0% 100% transparent;
}
#menu_start {
background: url("http://wowsoul.com/templates/wowsoul2/design_img/menu_start.jpg") no-repeat transparent;
display: block;
height: 79px;
width: 130px;
}
Вот реализация:

<a href="" id="menu_start" target="_blank" class="basic-modal6"/>
добавлено спустя 2 минуты:
Псевдокласс( или как его там) hover отвечает за то, каким будет оформление блока при наведении курсора.

17 Дек 2012, 19:17
NiceCat

собственно это я и сам посмотрел. Может я не правильно изложил вопрос, как задётся параметр отступа сверху картинки которая будет при наведении, т.е. что из этого кода отвечает за отступ сверху на картинке с двумя кнопками.
добавлено спустя 17 минут:
блин, решение оказалось куда проще)).
Может кому будет интересно:

[php:1:1f5ac68d61]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Эффект перекатывания</title>
<style type="text/css">
A.rollover {
background: url('3.jpg'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}

A.rollover:hover {
background-position:
0px /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
</style>
</head>
<body>
<a href="link.html" class="rollover"></a>
</body>
</html>[/php:1:1f5ac68d61]

17 Дек 2012, 20:03
Pisatel

Пора уже избавляться от ссылок- картинок. Все то же самое, что показано на изображении, можно реализовать с помощью background-image: gradient. Плюсы: файл css, в отличии от изображений, грузится всего один раз, соответственно, мы уменьшаем время генерации страницы. Сокращается количество запросов на сервер- тоже плюс. Ну и еще: если у вас картинки- ссылки сделаны прямо с надписями, то пс их просто не увидят, так как не умеют Только если через alt.

18 Дек 2012, 7:46
NiceCat

Pisatel пишет:
"Пора уже избавляться от ссылок- картинок. Все то же самое, что показано на изображении, можно реализовать с помощью background-image: gradient. Плюсы: файл css, в отличии от изображений, грузится всего один раз, соответственно, мы уменьшаем время генерации страницы. Сокращается количество запросов на сервер- тоже плюс. Ну и еще: если у вас картинки- ссылки сделаны прямо с надписями, то пс их просто не увидят, так как не умеют Только если через alt."

всё это конечно хорошо, но когда я делаю дизайн для игрового сервера, соответственно (WEB) мне нужно показать не чудеса быстродействия, а красоту и качество изображений.
p.s. изучаю сейчас материалы по веб-дизайну, как раз в плане графических элементов, и на одних градиентах нормальный веб дизайн не получится сделать. А стремиться есть к чему (см. вложения)

18 Дек 2012, 21:25
Pisatel

NiceCat, красиво. Успехов в развитии!

19 Дек 2012, 5:30
Ответить на тему