Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
HMENU Кнопки
DooDLeZДата: Воскресенье, 28.03.2010, 19:31 | Сообщение # 1

WebMaster
Сообщений: 485
[ ]
:-(
Всем привет. Сегодня мы будем рисовать HMENU.
Это две такие кнопки которые мы используем в дизайнах.
И в конце я расскажу как их задействовать.

Приступим...

Создам прозрачный документ с такими размерами: 133х75.
За тем создадим новый слой: Ctrl + Shift + N.
Зальём его белым цветом: Ctrl + G (текущий цвет настраиваем на панеле).
За тем нарисуем какой нибудь квадрат/овал. Таким цветом: #bcbcbc.

Вот что вышло у меня:

За тем перейдём в: Слой > Стиль слоя > Тень...

И настроим всё так как тут:

За тем перейдём там же в: Тиснение.

И настроим всё так как тут:

У Вас должно всё получится как тут:

За тем выйдем из Настройки стилей. И сделаем отражение.
Выделим наш уже готовый HMENu и сделаем копию.
За тем сделаем из неё отражение.
Что бы сделать отражение перейдём в: Редактирование > Трансформирование > Отразить по вертикали.
Теперь делаем прозрачность - 20%.
И берём ластик...стираем не нужное.

И в итоге у Вас должно получится так:

Теперь уберём белый фон. И сохраним данное изображение как PNG и под названием: HMENU1.

После того как Вы сохранили первый рисунок Вам нужно придать какой нить эфект на вторую картинку.
А тоесть что будет происходить когда Вы наведетё мышь на HMENU.
Я добавляю в Стилях к нашей картинке эфект Глянца. Цвет: #00f6ff.

И настраиваю его так:

Теперь сохраняем его как HMENU2. Формат: PNG.

Вот и всё. Теперь будем его собирать...

Заливаем две картинки: HMENU1.png; HMENU2.png в файловый менеджер.
За тем зайдём в Ваш CSS (Таблица стилей)
И в любое место вставим:

Code
#hmenu a {
    text-decoration: none;
    color: #ffffff;
    background: url(http://ПУТЬ К КАРТИНКАМ/HMENU1.png) no-repeat center top;
    display: block;
    height: 75px;
    width: 150px;
    text-align: center;
    font: bold 13px/38px tahoma, Times, serif;
}

#hmenu a:hover {
    background: url(http://ПУТЬ К КАРТИНКАМ/HMENU2.png) no-repeat top center;
    display: block;
    height: 75px;
    width: 150px;
    color: #ffffff;
    text-align: center;
    font: bold 13px/38px tahoma, Times, serif;
}

За тем в нужном Вам месте (где Вы хотите видеть данные картинки HMENU) ставим:

Code
<td width="80" height="37" id="hmenu"><a href="$HOME_PAGE_LINK$" title="В начало">Главная</a></td>
<td width="80" height="37" id="hmenu"><a href="/forum/" title="Форум">Форум</a></td>
<td width="80" height="37" id="hmenu"><a href="/load/" title="Файлы">Файлы</a></td>
<td width="80" height="37" id="hmenu"><a href="/publ/" title="Каталок статей">Статьи</a></td>
<td width="80" height="37" id="hmenu"><a href="/publ/" title="Каталок статей">Фото</a></td>

Все ссылки и названия ссылок заменяете на свои.

Вот и всё! Удачи в использовании wink Желательно показывайте что выходит у Вас... Буду оценивать.


  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта