Главная » Статьи » Меню

Черное меню в стиле vista by hawk.do.am


Посмотрите ДЕМО

Вот сделал простенькое меню в стиле vista надеюсь вам понравиться
это в CSS
Код
body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:0px;width:535px;height:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% "MS Serif", "New York", serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Vista_Black, .Vista_Black .button a{background: #aebcbf;color:#FFF;background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%);background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%);background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );background: linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); }.Vista_Black .button a:hover,.Vista_Black .button a:focus,.Vista_Black .button a:active{background: #0a0809;background: -moz-linear-gradient(top, #0a0809 0%, #6e7774 100%, #aebcbf 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a0809), color-stop(100%,#6e7774), color-stop(100%,#aebcbf));background: -webkit-linear-gradient(top, #0a0809 0%,#6e7774 100%,#aebcbf 100%);background: -o-linear-gradient(top, #0a0809 0%,#6e7774 100%,#aebcbf 100%);background: -ms-linear-gradient(top, #0a0809 0%,#6e7774 100%,#aebcbf 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0809', endColorstr='#aebcbf',GradientType=0 );background: linear-gradient(top, #0a0809 0%,#6e7774 100%,#aebcbf 100%);}.button:last-child a{float:left;border:none; -webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px}


а это уже в то место где будет само меню
Код
<ul id="menu_wrap" class="Vista_Black"><li class="button"><a href="#">Главная</a></li><li class="button"><a href="#">CSS3</a></li><li class="button"><a href="#">HTML5</a></li><li class="button"><a href="#">Скрипты</a></li><li class="button"><a href="#">Фоны для сайта</a></li><li class="button"><a href="#">Ресурсы</a></li><li class="button"><a href="#">Форум</a></li> </ul>


Спасибо за внимание
Категория: Меню | Добавил: slavick (16.08.2013)
Просмотров: 107 | Теги: меню, Vista, by hawk.do.am, черное, в стиле | Рейтинг: 1.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]