
Информер получился довольно крупным и состоит из двух блоков. По замыслу - первый блок отображает общее количество друзей или подписчиков, второй блок появляется при наведении и показывает общее количество лайков и репостов, с кнопкой "Подписаться", в которую можно поместить ссылку на группу/страницу.
Эффект появления блока выполнен в виде раздвижных створок, по открытию которых первый блок сменяется вторым с другим цветом фона.
<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>
<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 разметке. Но об этом позже.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);
}
©http://magentawave.com
Комментариев нет:
Отправить комментарий