Навигация
Все для движков сайта:Все для Seo:
  Графика/дизайн для сайта Графика/дизайн для сайта Купить vip Купить Vip

Чат:
mmmaxxx2011
mmmaxxx2011
29 мая 2017
Нашел спасибо
mmmaxxx2011
mmmaxxx2011
29 мая 2017
ujhsy, Что ты имеешь ввиду под поиском?
ujhsy
ujhsy
17 мая 2017
mmmaxxx2011, Он уже есть
заходи в форум и внизу есть поиск.
mmmaxxx2011
mmmaxxx2011
16 мая 2017
Добрый день,Админ можно сделать поиск по форуму?
warcon
warcon
3 мая 2017
Админ ты можешь ответить людям в этой теме? Или это так сложно?
"Php скрипт для копирования любых лендингов"
gung2005
gung2005
21 апреля 2017
кто знает софт для накрутки подписчиков страницы вк?
Trust
Trust
17 апреля 2017
Написал в ЛС.
akaligraf
akaligraf
14 апреля 2017
Добрый день! купил VIP. как активировать?
prudn
prudn
7 апреля 2017
Всем привет!
Primes
Primes
6 апреля 2017
Здравствуйте! где найти Модуль от темы XDS Coloring Theme
который называется "XDS Coloring > Произвольные Блоки"
Vantey92
Vantey92
19 марта 2017
Плюсую!
Моё почтение Трасту winked
ОтецДаниил
ОтецДаниил
18 марта 2017
Присоединяюсь! Респект Трасту!
jkeks
jkeks
13 марта 2017
Автор cms-file - мега чел. Материалы просто БОМБА.


Последние комментарии:

Онлайн:
Юзеры (0)
Гости (48)
Боты (3)
crawl Bot
Всего на сайте (51)

Название темы Автор Статистика Последнее сообщение
Взрывной рост из точки А в точку Б

Тема в разделе: Авторские курсы

Trust

Просмотров: 1086

Ответов: 0

Автор: Trust

4-06-2017, 20:05

[Нетология] Поиск клиентов и партнеров в LinkedIn

Тема в разделе: Авторские курсы

Trust

Просмотров: 588

Ответов: 0

Автор: Trust

3-06-2017, 21:31

Вебинар Е.В. Гильбо «Мировая экономическая революция и новые пути к успеху»

Тема в разделе: Авторские курсы

Trust

Просмотров: 964

Ответов: 0

Автор: Trust

3-06-2017, 21:16

Просмотров: 3 895, Комментариев: 0
Темное кнопочное меню на css.

Навигационное меню для различных движков на css.
Установка:
1.Вставить код ниже в файл, где у вас css(например, на Dle это styles.css):

/* Dark Button CSS */
.button {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #9fa8b0;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #232B30; /* old browsers */
    background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), 
color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', 
endColorstr='#232B30',GradientType=0 ); /* ie */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}
.button:hover {
    color: #fff;
    background: #4C5A64; /* old browsers */
    background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), 
color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', 
endColorstr='#2E3940',GradientType=0 ); /* ie */
}
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), 
color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', 
endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}

/* Search CSS: */
.search-input {
    padding: 0 5px 0 22px;
    border: 1px solid #1c252b;
    height: 30px;
    color: #9fa8b0;
    font-size: 12px;
    line-height: 30px;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), 
color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', 
endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.search-input:focus {outline: none;}
.search-submit {
    width: 13px;
    height: 13px;
    border: none;
    background: url(mag-glass.png) no-repeat;
    display: block;
    position: absolute;
    left: 26px;
    top: 10px;
    text-indent: -9999em;
}

/* Vertical List: */
.vertical-list {
    list-style: none;
    padding: 10px;
    width: 200px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), 
color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', 
endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.vertical-list .button {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #515B62; /* old browsers */
    background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), 
color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', 
endColorstr='#394147',GradientType=0 ); /* ie */
}
.vertical-list .button:hover {
    background: #5F6B72; /* old browsers */
    background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), 
color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', 
endColorstr='#434D54',GradientType=0 ); /* ie */
}
.vertical-list .button:active {
    padding: 5px 12px;
    top: 0;
    background: #515B62; /* old browsers */
    background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), 
color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', 
endColorstr='#394147',GradientType=0 ); /* ie */       -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
}

2.Вставить ,где хотите , чтоб отображалось меню (на Dle это main.tpl):
<ul class="button-list">
    <li><a href='/' class='button'>Home</a></li>
    <li><a href='/' class='button'>About</a></li>
    <li><a href='/' class='button'>Portfolio</a></li>
    <li><a href='/' class='button'>Blog</a></li>
    <li class="search"><input type="text" class="search-input"
 name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li>
</ul>
<h3>Vertical Menu:</h3>
<ul class="vertical-list">
    <li><a href='/' class='button'>Home</a></li>
    <li><a href='/' class='button'>Our Studio</a></li>
    <li><a href='/' class='button'>Portfolio</a></li>
    <li><a href='/' class='button'>Our Team</a></li>
    <li><a href='/' class='button'>Get in Touch</a></li>
</ul>


dark-nav-buttons.rar [4,92 Kb] (cкачиваний: 164)


Раздел: CSS
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Яндекс и Google апдейты:
    Апдейты Яndex тИЦ
    19.05.2017Последний
    12.04.2017
    24.03.2017
    Апдейты Яndex выдачи
    22.06.2017Последний
    20.06.2017
    17.06.2017
    Апдейты ЯКаталога
    23.06.2017Последний
    21.06.2017
    19.06.2017
    Апдейты Google
    06.12.2013Последний

Популярные новости

Витрина ссылок: