« Вращающиеся иконки социальных сетей на чистом CSS »

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

Ранее мы выкладывали уже вращающиеся иконки социальных сетей, вот только они вращались по часовой стрелке, а в данном примере они вращаются зеркально, что предает еще больше красоты. Что можно сказать о данных иконках: Сделаны они на белом фоне, размер фона 70x70px (его можно легко изменить под себя в CSS данного материала). Размер иконок 64x64px, какие социальные сети присутствуют, их у нас четыре - Вконтакте (vk.com), Одноклассники (ok.ru), Facebook (fb.com), Twiiter (twiiter.com) и видеохостинг YouTube (youtube.com). Цвет, размер и т.д. легко изменить в CSS стиле данного материала.

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

Код
/* Вращающиеся иконки социальных сетей на чистом CSS */
ul.ufivesocicon{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.ufivesocicon li{
display: inline-block;
width: 70px; /* Размер фона под иконкой */
height: 70px; /* Размер фона под иконкой */
margin-right: 10px;
background: white; /* Цвет фона */
text-transform: uppercase;
text-align: center;
cursor: pointer;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
}
ul.ufivesocicon li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.ufivesocicon li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 3px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.ufivesocicon li a img{
border-width: 0;
}
ul.ufivesocicon li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #f3be8138; /* Цвет 3D фона */
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.ufivesocicon li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* uFive.Ru */

3. Заходим в ПУ - Управление дизайном и в то место, где Вы хотите видеть иконки, ставим данный код:
Код
<ul class="ufivesocicon">
<li><a title="ВКонтакте" href="#"><span><img src="http://ufive.ru/demo_file/vrsoc_icon/vk.png" /></span></a></li>
<li><a title="Одноклассники" href="#"><span><img src="http://ufive.ru/demo_file/vrsoc_icon/ok.png" /></span></a></li>
<li><a title="Facebook" href="#"><span><img src="http://ufive.ru/demo_file/vrsoc_icon/fb.png" /></span></a></li>
<li><a title="Twitter" href="#"><span><img src="http://ufive.ru/demo_file/vrsoc_icon/twitter.png" /></span></a></li>
<li><a title="YouTube" href="#"><span><img src="http://ufive.ru/demo_file/vrsoc_icon/youtube.png" /></span></a></li>
</ul>

Готово!


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

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

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

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

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

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


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 25 | Загрузок: 1


Поделиться в соц. сетях:

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

Комментариев к материалу: 0
avatar