• Страница 1 из 1
  • 1
Рисуем и верстаем спрайт меню
php_expert
Дата: Пятница, 23.10.2009, 19:24 | Сообщение # 1
Группа: Удаленные
Этот способ будет работать во всех браузерах, он отличается от других тем что при наведение курсором на меню в худшем случае браузер только начнет грузить кнопку нажатия, здесь же иначе сначало браузер грузит полный набор кнопок одним рисунком (это называется спрайт) а затем уже работает с ним.

Шаг 1
Создайте новый слой в фотшопе 300 на 200.

Шаг 2
Создайте папку "Кнопки" а в ней под папки "По умолчанию", "Наведенные", "Нажатые", "Выбранные".

Шаг 3
В папке "По умолчанию" создайте новый слой и в нем слева сверху нарисуйте прямоугольник 100 на 50 затем напишите "меню1" шрифт "Arial", "Narrow", цвет #999999.

Шаг 4
Нарисуйте также в середине сверху и справа сверху.

Шаг 5
У вас должно получится это.

Шаг 6
Создайте дубликат слоев из папки "По умолчанию" в "Наведенные", "Нажатые", "Выбранные" измените цвет текста у папки "Наведенные" и "Нажатые" на #555555 а у "Выбранные" на #eeeeee.

Шаг 7
Вернить к папке "По умолчанию", запустите окно стиля слоя в котором находится прямоугольник, дальнейшие действия описаны в инструкции что на скрине.



Шаг 8
У вас должно получится это.

Шаг 9
Скопируйте стиль слоя в следущую папку "Наведенные".

Шаг 10
Скопируйте стиль слоя в следущую папку "Выбранные" и добавте внутреннее свечение.

Шаг 11
У вас должно получится это.

Шаг 12
В следущей папке "Выбранные".


Шаг 13
У вас должно получится это.

Шаг 14
Сохраните как main.jpg и спрайт готов.
Шаг 15
Создайте index.html и скопируйте туда это.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="author" content="php_expert"/>
<meta name="description" content="Как написать спрайт меню, средствами html и css"/>
<meta name="keywords" content="sprite, menu, css, html"/>
<style type="text/css">
*{outline:none}
#menu li{display:inline}
#menu li a{display:block;width:100px;height:50px;background:url(menu.jpg) top left no-repeat;float:left}
#menu #menu1 a:hover{background-position:0 -50px}
#menu #menu1 a:active{background-position:0 -100px}
#menu #menu1 a.active{background-position:0 -150px}
#menu #menu1 a.active:hover{background-position:0 -150px}
#menu #menu1 a.active:active{background-position:0 -150px}
#menu #menu2 a{background-position:-100px 0}
#menu #menu2 a:hover{background-position:-100px -50px}
#menu #menu2 a:active{background-position:-100px -100px}
#menu #menu2 a.active{background-position:-100px -150px}
#menu #menu2 a.active:hover{background-position:-100px -150px}
#menu #menu2 a.active:active{background-position:-100px -150px}
#menu #menu3 a{background-position:-200px 0}
#menu #menu3 a:hover{background-position:-200px -50px}
#menu #menu3 a:active{background-position:-200px -100px}
#menu #menu3 a.active{background-position:-200px -150px}
#menu #menu3 a.active:hover{background-position:-200px -150px}
#menu #menu3 a.active:active{background-position:-200px -150px}
</style>
<title>Как написать спрайт меню, средствами html и css</title>
</head>
<body>
<ul id="menu"><li id="menu1"><a href="#"></a></li><li id="menu2"><a href="#"></a></li><li id="menu3"><a class="active" href="#"></a></li></ul>
</body>
</html>

Автор: Php_expert
Скачать пример урока

  
php_expert
Дата: Пятница, 23.10.2009, 19:26 | Сообщение # 2
Группа: Удаленные
если с загруской будут проблемы дайте ссылку на хост который бы я мог перезалить файл
  
Duck4Fuck
Дата: Пятница, 23.10.2009, 19:33 | Сообщение # 3
болтун
Группа: Модераторы
Пользователь №: 317
Сообщений: 322
Получено оценок: 41
Охренительно, скажи кто автор и перенесу тему
  
Duck4Fuck
Дата: Пятница, 23.10.2009, 19:36 | Сообщение # 4
болтун
Группа: Модераторы
Пользователь №: 317
Сообщений: 322
Получено оценок: 41
Перезалил файл
Прикрепления: menu.rar (47.3 Kb)
  
php_expert
Дата: Пятница, 23.10.2009, 19:36 | Сообщение # 5
Группа: Удаленные
автор тот кто создал эту тему
  
Aleko
Дата: Пятница, 23.10.2009, 19:56 | Сообщение # 6
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
php_expert, большой и жирный +. Кинул ссылку на файл примера в пост.

Бесплатные обои.
  
ad
Дата: Пятница, 23.10.2009, 19:58 | Сообщение # 7
Группа: Удаленные
Изобретательно! Потом постараюсь применить у себя если время будет.
  
fan
Дата: Суббота, 24.10.2009, 11:52 | Сообщение # 8
молчун
Группа: Проверенные
Пользователь №: 9
Сообщений: 16
Получено оценок: 1
Метод Pixy. Автору зачет! :)
  
MadeMan
Дата: Суббота, 24.10.2009, 17:49 | Сообщение # 9
говорун
Группа: Проверенные
Пользователь №: 25
Сообщений: 185
Получено оценок: 6
зачет
  
Андрей
Дата: Суббота, 31.10.2009, 01:23 | Сообщение # 10
шептун
Группа: Проверенные
Пользователь №: 189
Сообщений: 65
Получено оценок: 11
рабочий пример таких менюшек http://dragoninteractive.com/ (не спам)
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.