» »

Темный футер для сайта на стилях CSS

Темный футер для сайта на стилях CSS

Неотъемлемой частью как в дизайн сайта и его функциональности, является низ сайта (футер) который может быть разный по стилистике. Но основном можно заметить, что он идет в темном оттенке. что здесь аналогичен, который может подойти на любую тематическую площадку. Где разбит на несколько разделов, что каждый будет отвечать за свою функциональность.

Это место под баннеры или для официального ресурса контакты, где можно прописать сразу несколько, это от почты и прямого телефона. По вверх его идет полоса в несколько пикселей, что все можно выставить на совершенно другую гамму и как отличное решение подогнать под свой сайт по палитре цвета.

Проверяя на тестовом сайте, и реально низ так смотрится.

Код на низ сайта в темном цвете

HTML

Код
<div align="center">  
  <div id="pda-footer_mob">  
  <footer>  
<div style="width:auto;height:145px;padding: 20px 20px;background-color: rgba(14, 20, 28, 0.85);">
<div class="foottitle">
<i class="fa fa-info-circle"></i> Информация
<hr class="hres">
</div>
<div class="foottitle">
<i class="fa fa-navicon"></i> Разделы сайта
<hr class="hres">
</div>
<div class="foottitle">
<i class="fa fa-users"></i> Друзья сайта
<hr class="hres">
</div>
<div class="foottitle">
<i class="fa fa-envelope"></i> Контакты
<hr class="hres">
</div>
<div class="footcont">
<i class="fa fa-info-circle"></i><a href="/index/0-2" title="О нас"> Информация о сайте</a><hr class="hres">
<i class="fa fa-exclamation-triangle"></i><a href="/index/pravila_sajta/0-5" title="Правила сайта"> Правила сайта</a><hr class="hres">
<i class="fa fa-question"></i><a href="/index/0-3" title="Авторам и правообладателям"> Авторам и правообладателям</a><hr class="hres">
<a class="tooltip" style="cursor: help;background-position-y: -4px;border: 0px solid #fff;padding: 5px 5px;border-radius: 3px;">
<bor style="border: 1px solid #fff;border-radius: 3px;padding: 4px;">16+</bor>
<span><img src="/16-1-.png"></span></a>
<a class="tooltip2" style="cursor: help;background-position-y: -4px;border: 0px solid #fff;padding: 5px 5px;border-radius: 3px;">
<bor style="border: 1px solid #fff;border-radius: 3px;padding: 4px;"><i style="width:19px;" class="fa fa-cog" aria-hidden="true"></i></bor>
<span><img src="/Igrvoy_mir.png"></span></a>
</div>
<div class="footcont">
<i class="fa fa-bullhorn" aria-hidden="true"></i><a href="/news/" title="Игровые новости"> Новости об играх</a><hr class="hres">
<i class="fa fa-download"></i><a href="/load/" title="Скачать моды"> Скачать файлы</a><hr class="hres">
<i class="fa fa-download"></i><a href="/load/" title="Скачать моды"> Скачать файлы</a><hr class="hres">
</div>
<div id="banners" class="footcont">
$COUNTER$
<a href="/forum/24-29-1" target="_blank" title="Место свободно 88x31"><img src="http://zornet.ru/Ajaxoskrip/3835891.gif" width="88" height="31"></a><p>  
<span style="margin-bottom: -7px;"><a href="/forum/24-29-1" target="_blank" title="Место свободно 88x31"><img src="http://zornet.ru/Ajaxoskrip/3835891.gif" width="88" height="31"></a>  
<a href="/forum/24-29-1" target="_blank" title="Место свободно 88x31"><img src="http://zornet.ru/Ajaxoskrip/3835891.gif" width="88" height="31"></a><hr style="margin-top: 9%;" class="hres">  
</span>
</div>
<div class="footcont">
<i class="fa fa-comments-o"></i><a href="/index/0-3" title="Обратная связь"> Связь с администрацией</a><hr class="hres">
<i class="fa fa-sitemap"></i><a href="/sitemap.xml" target="_blank" title="Карта сайта"> Карта сайта</a><hr class="hres">
<noindex>
<span class="socsbut"></span>
<span class="socsbut"></span>
<span class="socsbut"></span>
<span class="socsbut"></span>
</noindex></div>
</div>
<div style="background-color: rgba(11, 18, 28, 0.85);height:20px;" class="f_bottom0"><span style="color:#959595;font-size:8pt;margin-right: 20%;"class="h_footer_webmaster">Copyright - «<a href="/">warofdezarm.ru</a>» © 2017 | Design by <a href="http://life-gta.ru/index/8-1">Nikas</a> <span id="banners" style="float:right;margin-top: 2px;"> <a href="/"><img src="https://image.prntscr.com/image/5Bu72REHTdSZv221tT_Vqw.png" alt="Мы Вконтакте"></a> <img src="https://image.prntscr.com/image/fnQReTwaS1SGac6punB3nA.png" alt="Мы в FaceBook"> <img src="https://image.prntscr.com/image/RzRaP4unRP6Gp9fkHoqX_g.png" alt="Мы в YouTube"> <img src="https://image.prntscr.com/image/JXOj2HuMTmaU5WI7lEI-ew.png" alt="RSS лента"> </span></span></div>  
</div>
</footer>

CSS

Код
.tooltip span{  
border-radius: 2px 2px 2px 2px;  
visibility: hidden;  
position: absolute;  
opacity: 0;  
visibility: hidden;  
transition: opacity 0.3s, visibility 0s linear 0.1s;  
left: 102px;
margin-top: -160px;
cursor:help;  
border-radius: 5px;  
}  
.tooltip2 span{  
border-radius: 2px 2px 2px 2px;  
visibility: hidden;  
position: absolute;  
opacity: 0;  
visibility: hidden;  
transition: opacity 0.3s, visibility 0s linear 0.1s;  
left: 147px;
margin-top: -160px;
cursor:help;  
border-radius: 5px;  
}  
.tooltip2:hover span{  
opacity: 1;  
visibility: visible;  
transition-delay: 0.3s;}
/*-------*/
.tooltip:hover span{  
opacity: 1;  
visibility: visible;  
transition-delay: 0.3s;}
/*-------*/

.footcontent {padding:250px;}
#banners A IMG{opacity:.5;-moz-opacity:.3;filter:alpha(opacity=20)}
#banners a:hover img{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);background:none}
.foottitle {
  width: 280px;
  float: left;
  margin-right: 5px;
  font-size: 12px;
  text-transform: uppercase;
  color: #326ba1;
  font-family: 'PT Sans Narrow', sans-serif;
}

.footcont a {
  font-weight: normal;
  color: #828282;
  text-shadow: none;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 1.05em;
}

.footcont a:hover {color: #fff;}

.hres {
  border: 0px solid #1c1c1c;
  border-bottom-width: 1px;
  display: block;
  height: 0;
}

.footcont {width:280px;float:left;margin-right:5px;font-size:12px;}

/*niz saita*/
footer {background:#282828; width: 100%; max-width:1200px;border-top: solid 3px #62BFE4;border-top-width: 3px;border-top-color: rgb(98, 191, 228);}
footer a, footer a:hover {color:#8CB2C1;}
.footer_table {width: 100%; max-width:1020px; display:table; padding:20px 0;}
.footer_td {max-width:255px; display:table-cell; vertical-align:top;}
.footer_block {width:235px; overflow:hidden; text-align:left; color: rgba(255, 255, 255, 0.63);}
.footer_block li a {padding-bottom:4px; padding-left:10px; display:inline-block; background:url('http://zornet.ru/ZORNET/Fail/f_links-3000.png') 0px 5px no-repeat;}
.f_block_title {padding-bottom:7px; font-size:19px; color: rgba(187, 187, 187, 0.5);}
.footer_block ul, .footer_block li {margin:0px; padding:0px; list-style-type:none}
.f_bottom {padding:30px 0px;color:#FFF;font-size:13px;background:#232323;}

#easyTooltip{  
padding:10px;  
border:1px solid #000000;  
background:#000;  
border-radius: 4px;  
-webkit-border-radius: 4px;  
-moz-border-radius: 4px;  
color: #666666;  
filter:alpha(opacity=90);  
-moz-opacity: 0.9;  
-khtml-opacity: 0.9;  
opacity: 0.9;  
z-index:1000;  
}

Спасибо пользователю TiMzLeR за предоставленный материал.
06.12.2017 Просмотров: 292 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
TiMzLeR
TiMzLeR 06.12.2017 12:231
0
Отлично смотрится, всегда пожалуйста 09a
-SAM-
-SAM- 06.12.2017 19:252
+2
Материал бред, поскольку много стилей, которые ко всему прочему перекрыты инлайн-стилями (не вынесены в css). Не советую ставить и портить сайт себе (как вариант - переписать полностью, но это уже другой разговор).
Kosten
Kosten 06.12.2017 20:413
0
Больше всего на свой менять нужно или найти другой, или убрать лишнее.
avatar