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

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

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

Можешь почитать и вот эту статейку " Всплывающее окно при загрузке сайта с помощью CSS3 и JS"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

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

Теги

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

Статистика

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