Красивый низ сайта от сайта zornet
|
|
Kosten | Воскресенье, 14 Октября 2012, 22:35 | Сообщение 1 |
|
Низ сайта от сайта 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ыч
| Страна: (RU) |
| |
Maryges | Понедельник, 11 Апреля 2016, 13:54 | Сообщение 2 |
| Что то за низ сайта тема пошла, давно хотел такой установить, думаю время пришло, но здесь нужно лишнее только убрать, так статистика мне не нужна.
| Страна: (RU) |
| |
Kosten | Понедельник, 11 Апреля 2016, 13:57 | Сообщение 3 |
| Maryges, так Supermenыч, давно замутил этот низ, ему точно больше 2 лет, а вот вижу, актуальности своей не потерял.
| Страна: (RU) |
| |
FeStemBer | Понедельник, 11 Апреля 2016, 18:00 | Сообщение 4 |
| Низ сайта, так простой и смотрится красиво, как градиент, но думаю главное его преимущество, это тематика, так как он может подойти под любую.
| Страна: (RU) |
| |
Scheme | Понедельник, 11 Апреля 2016, 18:06 | Сообщение 5 |
| Здесь как вижу с левой стороны лучше баннер ставить, если поставите надпись, не так красиво смотреться будет. А так не скажу что оригинально, но в свое время думаю нормально было, но главное можно самому цвет вывести,какой потребляться.
| Страна: (RU) |
| |
ucozmental | Понедельник, 11 Апреля 2016, 18:22 | Сообщение 6 |
| Но здесь видно, что на стилях сделан сам обзор цвета, так как он идет с начало светло а потом переходит плавно в темный оттенок, мне лично всегда такая гарнитура нравилась.
| Страна: (RU) |
| |
Kosten | Понедельник, 11 Апреля 2016, 18:41 | Сообщение 7 |
| ucozmental, все правильно, в стилях можно настроить, но не думаю, что темный заменит, на какой то другой, но смотря много зависит от дизайн сайта.
| Страна: (RU) |
| |
csretven | Понедельник, 11 Апреля 2016, 19:41 | Сообщение 8 |
| Одно не понятно, для чего изначално делали левые кнопки, как форум или статистика, но вверх, нужно перетянуть в правую сторону, не то что так лучше, но как то по привычнее.
| Страна: (RU) |
| |
Сопрано | Понедельник, 11 Апреля 2016, 21:48 | Сообщение 9 |
| Этот ставил, но скрипт файлах брал, так не чего смотрится, кто то говорит кнопки убрать, их можно и по другому применить.
| Страна: (RU) |
| |