Хаки и Скрипты Next Generation CMS

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

irbees2008 irbees2008 Опубликовано - 23 - ноября Кнопки и иконки
19927 - 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.Ну не которые варианты требуют подключение скриптов,смотрите внимательно исходники,если там есть скрипты то и их добавляем в наш шаблон.Кому что не понятно,или не получается отписываемся в комментах.

Можешь почитать и вот эту статейку "Смена цифр на JavaScript"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.335сек
  • Потребление памяти: 5.173 Mb 
  •   Яндекс.Метрика