23 Nov 2014, 23:39 24 Nov 2014, 15:19 avatar

Выводим в изображение новости социальные кнопки поделиться с помощью CSS3

  1. Адаптировал: irbees2008
  2. Уровень сложности исполнения:нужны навыки css html
  3. Демо: в новом окне
Всем привет.Сегодня я набрел на интересный вывод кнопок социальных сетей в изображении с помошью CSS3.
Сейчас я распишу как поставить первый эффект на ваш шаблон,остальные вы можете глянуть в исходниках и проделать все аноалогично.
Итак приступим .
1.Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.Открываем файл index.html ,это первый вариант, копируем все что внутри тега style,это у нас вот это1
Код:
 .image-effect-fall-back{
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
-webkit-perspective: 800px;
perspective: 800px;
}

.image-effect-fall-back .image-layer{
position: absolute;
top:0;
left: 0;
height: 300px;
-webkit-transition: 0.6s;
transition: 0.6s;
z-index: 1;
}

.image-effect-fall-back:hover .image-layer{
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
overflow: visible;
}

.image-effect-fall-back .image-layer img{
height: 100%;
}

.image-effect-fall-back .image-layer:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
opacity: 0;

-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: rotateX(114deg) translateZ(-26px) translateY(110px) scale(0.75);
transform: rotateX(114deg) translateZ(-26px) translateY(110px) scale(0.75);
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
}

.image-effect-fall-back:hover .image-layer:before {
opacity: 0.3;
}

.image-effect-fall-back .share-layer{
position: absolute;
bottom: 100px;
left: 0;
width: 100%;
height: 100px;
opacity: 0;
z-index: 10;

-webkit-transition: 0.6s;
transition: 0.6s;

-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
}

.image-effect-fall-back:hover .share-layer {
opacity: 1;

-webkit-transform: rotateX(0deg) translateY(-70px);
transform: rotateX(0deg) translateY(-70px);
}

.share-button{
display: inline-block;
text-decoration: none;
color: #ffffff;
padding: 12px;
width: 80px;
border-radius: 2px;
margin: 25px 10px;
}

.share-via-facebook{
background-color:#3b5998;
}

.share-via-twitter{
background-color:#00aced;
}

.share-via-google{
background-color:#d34836;
}
И вставляем в в файл стилей вашего шаблона.
3.Сам блок с нашим изображением и кнопками
Код:
 <div class="image-effect-fall-back">

<div class="share-layer">

<a href="#" class="share-button share-via-facebook">
<i class="fa fa-facebook"></i>
Facebook это кнопка
</a>

<a href="#" class="share-button share-via-twitter">
<i class="fa fa-twitter"></i>
Twitter это кнопка
</a>

<a href="#" class="share-button share-via-google">
<i class="fa fa-google"></i>
Google + это кнопка
</a>

</div>

<div class="image-layer">
<img src="Здесь ссылка на изображение" alt="">
</div>

</div>
4. Этот код лучше прописать жестко в шаблоне новости,и изображение добавлять через дополнительное поле.
Ну и кнопки , просто ставите нужный код соц сетей.
5.Ну не которые варианты требуют подключение скриптов,смотрите внимательно исходники,если там есть скрипты то и их добавляем в наш шаблон.Кому что не понятно,или не получается отписываемся в комментах.
Можешь почитать и вот эту статейку "Как подключить Jquery с разных хранилищ"

mistakes

0 комментариев

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.