Дизайн информера социальной сети Facebook для сайта

Информер социальной сети на сайте служит для привлечения аудитории посетителей в группу проекта или на страницу его автора. Как правило, в него помещают информацию о количестве подписчиков/читателей, показатели популярности - лайки и репосты. При помощи CSS3 и эффектов анимации можно сделать социальный информер более привлекательным.

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

• 1096

  Подписчиков

  Лайков: 10789
  Репостов: 6789

  Подписаться

  HTML код информера выглядит так:

<div class="container">
 <ul class="soc-links clearfix">
  <li class="fb-ac">
   <div class="ac-block">
    <div class="slide-bg-1"></div>
    <div class="slide-bg-2"></div>
    <div class="icon"></div>
    <div class="stat-ac">
     <div class="title">1096</div>
     <div class="subtitle">Подписчиков</div>
    </div>
    <div class="info-ac">
     <div class="title">Лайков: 10789<br>Репостов: 6789</div>
     <span class="button">Подписаться</span>
    </div>
   </div>
  </li>
 </ul>
</div>

  Чтобы информер принял привлекательный вид, к нему нужно добавить CSS:

.soc-links {
 display: inline-block;
}
.soc-links li {
 float: left;
 width: 125px;
 position: relative;
 text-align: center;
 color: #fff;
 overflow: hidden;
 border-left: solid 1px rgba(255, 255, 255, 0.15);
 border-right: solid 1px rgba(0, 0, 0, 0.15);
 box-sizing: border-box;
}
.soc-links li .ac-block {
 height: 150px;
 position: relative;
}
.fb-ac {
 background-color: #3b5998;
}
.fb-ac:hover .slide-bg-1 {
 background: #4080ff; /*#0000CD;*/
}
.fb-ac:hover .slide-bg-2 {
 background: #4080ff;;
}
.fb-ac .slide-bg-1 {
 position: absolute;
 width: 2px;
 height: 0;
 bottom: 0;
 left: 50%;
 margin-left: -1px;
 transition: 0.3s 0.6s;
}
.fb-ac:hover .slide-bg-1 {
 height: 100%;
 transition: 0.3s;
}
.fb-ac .slide-bg-2 {
 position: absolute;
 width: 0;
 height: 100%;
 bottom: 0;
 left: 50%;
 transition: 0.3s 0.3s;
}
.fb-ac:hover .slide-bg-2 {
 height: 100%;
 width: 100%;
 margin-left: -61px;
}
.soc-links li .ac-block .icon {
 padding: 20px 0 15px 0;
 position: relative;
 z-index: 10;
 display: block;
 height: 51px;
 width: 100%;
 margin: auto;
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAS1BMVEUAAAD+/v7+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////////+/v7+/v7+/v7+/v7+/v7+/v7///9NcZfeAAAAGHRSTlMA+dPhp1xEgf6X3bKghkAoBfDIt2JaTBr0zqwPAAAAdklEQVR4Ae3SORqDMAxEYQkUkFkge3T/kwajjsae0v78+n+qoZq779sQ2yirYWbzOGt9sSMABMPAriAYDQQvFHTmdet4BIAfebmAqVAQROThQCW2JEBvlyYUPFEwoyCgYE2AiZnVzrSPvUu/RgMNNPC9nX2o1v4V4x8+ZaNNmAAAAABJRU5ErkJggg==);
 background-repeat: no-repeat;
 background-position: 50%;
}
.soc-links li.fb-ac .ac-block .icon span {
 background-position: 0 0;
}
.soc-links li .ac-block .stat-ac {
 position: absolute;
 width: 100%;
 bottom: 20px;
 z-index: 10;
 transition: 0.3s 0.9s;
}
.soc-links li:hover > .ac-block .stat-ac {
 bottom: -40px;
 transition: 0.3s 0.5s;
}
.soc-links li .ac-block .stat-ac .title {
 font-size: 17px;
}
.soc-links li .ac-block .info-ac {
 position: absolute;
 width: 100%;
 bottom: -60px;
 z-index: 10;
 transition: 0.3s;
}
.soc-links li:hover > .ac-block .info-ac {
 position: absolute;
 width: 100%;
 bottom: 12px;
 z-index: 10;
 transition: 0.3s 0.9s;
}
.soc-links li .ac-block .info-ac .title {
 line-height: 14px;
 font-size: 12px;
}
.soc-links li .ac-block .info-ac .button {
 display: inline-block;
 height: 24px;
 line-height: 24px;
 padding: 0 10px;
 color: #fff;
 cursor: pointer;
 font-size: 12px;
 background: rgba(0, 0, 0, 0.6);
 margin-top: 5px;
 border-radius: 3px;
}
.soc-links li .ac-block .info-ac .button:hover {
 text-decoration: none;
 background: rgba(0, 0, 0, 0.4);
}

  Вот и все, оформление социального информера на примере Facebook окончено. Чтобы все это великолепие заработало в автоматическом режиме и с реальными данными естественно потребуется прикрутить соответствующий JS или PHP код и разместить полученные данные в HTML разметке. Но об этом позже.

©http://magentawave.com