• 15346
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Всем привет.Сегодня я набрел на интересный вывод кнопок социальных сетей в изображении с помошью 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.Ну не которые варианты требуют подключение скриптов,смотрите внимательно исходники,если там есть скрипты то и их добавляем в наш шаблон.Кому что не понятно,или не получается отписываемся в комментах.

Можешь почитать и вот эту статейку "Выводим блоки для определенных групп пользователей"

mistakes

Это тоже интересно

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

Ваше мнение

Ваше отношение к TWIG
Результаты

----