Хаки и Скрипты Next Generation CMS : Кнопки и иконки, Изображения, CSS : Выводим в изображение новости социальные кнопки поделиться с помощью CSS3

irbees2008 Опубликовано - 23 - ноября Кнопки и иконки

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

Можешь почитать и вот эту статейку "Немного о кнопках"

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

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