• Страница 1 из 1
  • 1
Красивый низ сайта от сайта zornet
Kosten
Воскресенье, 14 Октября 2012, 22:35 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70


Низ сайта от сайта zornet.ru. Красивый низ сайта, по дизайну просто выполнен шикарно. О чем и говорит что этот низ подойдет под многие дизайн сайта, так как под светлый дизайн и красиво будит смотреться на темном дизайн сайте. На скрине видите что у низа есть свои фишки, которые реально йа заявляю очень пригодятся сайту чтоб быт всегда при теме и плавная кнопка вверх.
Начнем устанавливать:
В низ сайта идем на своем сайте и все сносим. То есть старый код и прописываем, наш новый.
Code
<table cellspacing="0">
  <tr><td valign="middle"><div class="position"><div class="knopka">Статистика<br><div class="drop"><div class="text">$ONLINE_USERS_LIST$<hr size="1">$ONLINE_COUNTER$</div><div class="ugol"></div></div></div></div></td><td><div class="knopka1">Форум<div class="drop1"><div class="text" style="height:217px;">$MYINF_3$</div><div class="ugol"></div></div></div></td><td><div class="knopka2" onclick="$('body').scrollTo({top:$('body').offset().top, left:0}, 1500);return false;">Наверх</div></td></tr></table>
<table class="footer" cellspacing="0"><tr><td width="70%">
  <div style="text-shadow:0 0 3px #ccc;padding:4px;border:1px solid black;-webkit-box-shadow:inset 0 0 10px black;-moz-box-shadow:inset 0 0 10px black;background:#efefef;width:81px;border-radius:3px;color:black;text-align:center;">
  $POWERED_BY$</div></td><td width="100" align="left"><div style="border-radius:3px;padding:5px;border:1px solid black;-webkit-box-shadow:inset 0 0 5px black;-moz-box-shadow:inset 0 0 5px black;background:#efefef;width:90px;height:31px;"><img src="http://zornet.ru/zornet_ru7/88x31.png"></div></td><td width="100"><div style="border-radius:3px;padding:5px;border:1px solid black;-webkit-box-shadow:inset 0 0 5px black;-moz-box-shadow:inset 0 0 5px black;background:#efefef;width:88px;height:31px;"> <a href="/forum/109" target="_blank" title="Место свободно 88х31"><img src="http://zornet.ru/zornet_ru7/88x31.png" width="88" border="0" height="31"></a>
</div></td><td width="100" style="margin-right:15px;"><div style="border-radius:3px;padding:5px;border:1px solid black;-webkit-box-shadow:inset 0 0 5px black;-moz-box-shadow:inset 0 0 5px black;background:#efefef;width:90px;height:31px;"> <a href="/forum/109" target="_blank" title="Место свободно 88х31"><img src="http://zornet.ru/zornet_ru7/88x31.png" width="88" border="0" height="31"></a>
  </div></td></tr></table>


Ну и канешно стили, куда без них.Без них и красоты и оригинальности у низа не было. Вообщем в CSS вставляем этот стиль.
Code
.footer{
background:-webkit-linear-gradient(top,#808080,#202020);
background:-moz-linear-gradient(top,#808080,#202020);
height-max:20px;
width:100%;
margin-top:24px;
padding-left:20px;
padding-bottom:20px;
padding-top:20px;
border-top:1px solid #c0c0c0;
}
.knopka{
position:absolute;
display:inline-block;
background:#404040;
width:100px;
height:15px;
color:white;
padding:5px;
vertical-align:middle;
text-align:center;
border-top-left-radius:4px;
}
.knopka:hover{
background:white;
color:black;
-webkit-box-shadow:0 0 5px black;
-moz-box-shadow:0 0 5px black;
cursor:pointer;
}

.knopka1{
position:absolute;
display:inline-block;
background:#404040;
width:100px;
height:15px;
color:white;
padding:5px;
text-align:center;
margin-left:107px;
}
.knopka1:hover{
background:white;
color:black;
-moz-box-shadow:0 0 5px black;
-webkit-box-shadow:0 0 5px black;
cursor:pointer;
}
.knopka2{
position:absolute;
display:inline-block;
background:#404040;
width:100px;
height:15px;
color:white;
padding:5px;
text-align:center;
margin-left:214px;
border-top-right-radius:4px;
}
.knopka2:hover{
background:white;
color:black;
-webkit-box-shadow:0 0 5px black;
-moz-box-shadow:0 0 5px black;
cursor:pointer;
}
.knopka2:active{
-webkit-box-shadow:inset 0 0 5px black;
-moz-box-shadow:inset 0 0 5px black;
}
.drop{
-webkit-box-shadow:0 0 5px rgba(0,0,0,25);
-moz-box-shadow:0 0 5px rgba(0,0,0,25);
width:200px;
height:100px;
background:#404040;
display:none;
border-radius:4px;
border:1px solid black;
padding:3px;
color:white;
}
.drop1{
-webkit-box-shadow:0 0 5px rgba(0,0,0,25);
-moz-box-shadow:0 0 5px rgba(0,0,0,25);
width:200px;
height:223px;
background:#404040;
display:none;
border-radius:4px;
border:1px solid black;
padding:3px;
color:white;
}
.knopka:hover .drop{
display:block;
position:relative;
cursor:pointer;
bottom:130px;
}
.knopka1:hover .drop1{
display:block;
position:relative;
cursor:pointer;
bottom:253px;
}
.knopka2:hover .drop1{
display:block;
position:relative;
cursor:pointer;
bottom:130px;
}
.position{
top:200px;
vertical-align:middle;
}
.text{
padding:3px;
height:94px;
width:auto;
background:white;
color:black;
text-align:left;
}
.ugol{
background:url(http://zornet.ru/zornet_ru8/fon_ugol_1.png) no-repeat;
height:10px;
width:200px;
}


Ставьте, в CSS можно подогнать под свой сайт если вас что то не устроит.

Автор: Supermenыч
Прикрепления: 0531592.jpg (89.1 Kb)
Страна: (RU)
Maryges
Понедельник, 11 Апреля 2016, 13:54 | Сообщение 2
Оффлайн
Пользователи
Сообщений:142
Награды: 0
Что то за низ сайта тема пошла, давно хотел такой установить, думаю время пришло, но здесь нужно лишнее только убрать, так статистика мне не нужна.
Страна: (RU)
Kosten
Понедельник, 11 Апреля 2016, 13:57 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Maryges, так Supermenыч, давно замутил этот низ, ему точно больше 2 лет, а вот вижу, актуальности своей не потерял.
Страна: (RU)
FeStemBer
Понедельник, 11 Апреля 2016, 18:00 | Сообщение 4
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Низ сайта, так простой и смотрится красиво, как градиент, но думаю главное его преимущество, это тематика, так как он может подойти под любую.
Страна: (RU)
Scheme
Понедельник, 11 Апреля 2016, 18:06 | Сообщение 5
Оффлайн
Пользователи
Сообщений:157
Награды: 1
Здесь как вижу с левой стороны лучше баннер ставить, если поставите надпись, не так красиво смотреться будет. А так не скажу что оригинально, но в свое время думаю нормально было, но главное можно самому цвет вывести,какой потребляться.
Страна: (RU)
ucozmental
Понедельник, 11 Апреля 2016, 18:22 | Сообщение 6
Оффлайн
Пользователи
Сообщений:112
Награды: 0
Но здесь видно, что на стилях сделан сам обзор цвета, так как он идет с начало светло а потом переходит плавно в темный оттенок, мне лично всегда такая гарнитура нравилась.
Страна: (RU)
Kosten
Понедельник, 11 Апреля 2016, 18:41 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
ucozmental, все правильно, в стилях можно настроить, но не думаю, что темный заменит, на какой то другой, но смотря много зависит от дизайн сайта.
Страна: (RU)
csretven
Понедельник, 11 Апреля 2016, 19:41 | Сообщение 8
Оффлайн
Пользователи
Сообщений:54
Награды: 0
Одно не понятно, для чего изначално делали левые кнопки, как форум или статистика, но вверх, нужно перетянуть в правую сторону, не то что так лучше, но как то по привычнее.
Страна: (RU)
Сопрано
Понедельник, 11 Апреля 2016, 21:48 | Сообщение 9
Оффлайн
Vip
Сообщений:461
Награды: 4
Этот ставил, но скрипт файлах брал, так не чего смотрится, кто то говорит кнопки убрать, их можно и по другому применить.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: