Foxter
18.12.2007, 21:23
Я хочу показать Вам, что Вы можете сделать с минимальным усилием и небольшим количеством воображения.
Вот - скриншот с Windows Vista.
http://i159.photobucket.com/albums/t143/foxter_ru/forum/vista_menu.png
Мы попробуем воспроизвести эту панель инструментов, с кнопками и эффектами для браузера. [посмотреть (http://vault.foxter.ru/lj-files/20071218/vista_toolbar.html)]
http://i159.photobucket.com/albums/t143/foxter_ru/forum/menu.png
1. Панель инструментов (ToolBar)
Сначала определим панель инструментов как ul. Этот ul тэг будет в div тэге. Каждый li тэг будет кнопкой панели инструментов. Теперь, когда Вам будет нужна новая кнопка нужно будет всего лишь добавить li тэг. Как это выглядит в HTML:
div id="vista_toolbar"
ul
li.../li
/ul
/div Итак, теперь определим CSS для панели инструментов.
Сначала "vista_toolbar"
#vista_toolbar {
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
} Теперь ul тэг.
#vista_toolbar ul {
background-image:url(back.gif);
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0 10px 0 10px;
width:500px;
}Высоту нашего тулбара сделаем "line-height:32px;" а ширину "width:500px;". И 10 дополнительных px, чтобы сделать отступ с начала панели инструментов ("padding: 0 10px 0 10 px;").
Дальше идет li-тэг.
#vista_toolbar li {
display:inline;
padding:0;
}Указываем "inline", потому что мы хотим, чтобы наши кнопки были показаны последовательно.
Теперь приступим к созданию кнопок
При необходимости подрежьте изображения кнопки.
http://i159.photobucket.com/albums/t143/foxter_ru/forum/left.png - левая часть
http://i159.photobucket.com/albums/t143/foxter_ru/forum/right.png -правая часть
теперь мы добавим эту картину на a:hover в CSS
li
a href="#"
span Add New /span
/a
/liЕсли Вы хотите добавить картинку следом за текстом добавьте в HTML img align="left" src="files/add.gif" alt="add new" в span
Ну например:
li
a href="#"
span
img align="left" src="files/add.gif" alt="add new" Add New
/span
/a
/li
Далее, чтобы обойти стандартное определение цвета определим для некоторых тегов свои цвета:
#vista_toolbar a span {
display:block;
float:none;
padding:0 10px 0 7px;
}
#vista_toolbar a span img {
border:none;
margin:8px 4px 0 0;
}Если у нас есть картинка за текстом, мы должны определить ее вертикаль и края.
Вот - CSS листинг, чтобы сделать эффект подсвечивания:
#vista_toolbar a:hover {
background: url(left.png) no-repeat left center; }
#vista_toolbar a:hover span {
background:url(right.png) no-repeat right center;
} [живое превью тут (http://vault.foxter.ru/lj-files/20071218/vista_toolbar.html)]
оригинал статьи (http://blog.itookia.com/post/How-to-create-VISTA-style-toolbar-with-CSS.aspx)
перевел неизвестный
Вот - скриншот с Windows Vista.
http://i159.photobucket.com/albums/t143/foxter_ru/forum/vista_menu.png
Мы попробуем воспроизвести эту панель инструментов, с кнопками и эффектами для браузера. [посмотреть (http://vault.foxter.ru/lj-files/20071218/vista_toolbar.html)]
http://i159.photobucket.com/albums/t143/foxter_ru/forum/menu.png
1. Панель инструментов (ToolBar)
Сначала определим панель инструментов как ul. Этот ul тэг будет в div тэге. Каждый li тэг будет кнопкой панели инструментов. Теперь, когда Вам будет нужна новая кнопка нужно будет всего лишь добавить li тэг. Как это выглядит в HTML:
div id="vista_toolbar"
ul
li.../li
/ul
/div Итак, теперь определим CSS для панели инструментов.
Сначала "vista_toolbar"
#vista_toolbar {
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
} Теперь ul тэг.
#vista_toolbar ul {
background-image:url(back.gif);
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0 10px 0 10px;
width:500px;
}Высоту нашего тулбара сделаем "line-height:32px;" а ширину "width:500px;". И 10 дополнительных px, чтобы сделать отступ с начала панели инструментов ("padding: 0 10px 0 10 px;").
Дальше идет li-тэг.
#vista_toolbar li {
display:inline;
padding:0;
}Указываем "inline", потому что мы хотим, чтобы наши кнопки были показаны последовательно.
Теперь приступим к созданию кнопок
При необходимости подрежьте изображения кнопки.
http://i159.photobucket.com/albums/t143/foxter_ru/forum/left.png - левая часть
http://i159.photobucket.com/albums/t143/foxter_ru/forum/right.png -правая часть
теперь мы добавим эту картину на a:hover в CSS
li
a href="#"
span Add New /span
/a
/liЕсли Вы хотите добавить картинку следом за текстом добавьте в HTML img align="left" src="files/add.gif" alt="add new" в span
Ну например:
li
a href="#"
span
img align="left" src="files/add.gif" alt="add new" Add New
/span
/a
/li
Далее, чтобы обойти стандартное определение цвета определим для некоторых тегов свои цвета:
#vista_toolbar a span {
display:block;
float:none;
padding:0 10px 0 7px;
}
#vista_toolbar a span img {
border:none;
margin:8px 4px 0 0;
}Если у нас есть картинка за текстом, мы должны определить ее вертикаль и края.
Вот - CSS листинг, чтобы сделать эффект подсвечивания:
#vista_toolbar a:hover {
background: url(left.png) no-repeat left center; }
#vista_toolbar a:hover span {
background:url(right.png) no-repeat right center;
} [живое превью тут (http://vault.foxter.ru/lj-files/20071218/vista_toolbar.html)]
оригинал статьи (http://blog.itookia.com/post/How-to-create-VISTA-style-toolbar-with-CSS.aspx)
перевел неизвестный