« Вращающиеся социальные иконки для uCoz »

Описание материала:

В данном материале, я хочу Вам предложить не плохие, вращающиеся социальные иконки для сайтов в системе uCoz. При наведение на одну из иконок, она будет вращаться на 360 градусов и встанет в исходное положение. Всего иконок девять и в них вошли - ВКонтакте, Одноклассники, Facebook, Twitter, Google +, Linkedin, LiveJournal, Youtube и RSS. Но Вы можете изменить легко их количество или просто заменить на свои социальные сети, а так же на свои любые иконки, так как в CSS не прописан размер иконок, Вы можете ставить любые, пусть они будут 24x24 или даже 256x256. Да забыл сказать, размер данных иконок 48x48.

Установка:
1. Скачиваем архив с нашего сайта и загружаем папку soc_icons в корень своего сайта
2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:

Код
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.social {text-align: center;margin: 100px 0px 0px;}
/* uFive.Ru */

3. Заходим в ПУ - Управление дизайном и в то место, где Вы хотите видеть иконки, ставим данный код:
Код
<div id="social" class="social">
<a target="_blank" rel="nofollow" href="http://vk.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/vk.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://odnoklassniki.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/o.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://fb.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/fb.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://twitter.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/t.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://plus.google.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/gp.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://linkedin.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/in.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://livejournal.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/lj.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://youtube.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/yt.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="#">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/rss.png"style="margin-right: 1px;" /></a>
</div>

Готово!


Скачать ( Размер архива 59.9 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 935 | Загрузок: 47


Поделиться в соц. сетях:
Комментариев к материалу: 4
Удобно только я не использую такое, хотя может и буду когда-нибудь использовать. Все может быть.
0
Виктор Ягодин 22.02.2016 в 21:44
Ну может кому-нибудь и пригодится)
0
Необычные.
2
Виктор Ягодин 22.02.2016 в 18:34
Что-то есть такое)
0
avatar