ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простые социальные значки с эффектом CSS

Простые социальные значки с эффектом CSS

Каждый веб мастер понимает, что автономные социальные значки намного лучше от сервиса, что предлагают. Что здесь еще идет стильный эффект. Когда происходит наведение на них, то они проворачиваются полностью, что все завязано на стилистике. Где вы можете сами выставить тот эффект, что вам нужно. Также по размеру все также редактируется, что можно сделать меньше по ширине и безусловно больше, все зависит от вашего интернет ресурса, и где они будут установлены.

Простые социальные значки позволяют добавлять до 14 самых популярных значков социальных сетей в любую область на вашем блоге или веб сайте. Также картинки является простой в использовании, настраиваемый способ отображения значков, которые ссылаются посетителей на ваш различные профили в социальных сетях. С помощью простого интерфейса параметров кнопок вы можете выбрать, какие профили показывать, настраивать цвет и размер ваших значков и определять их выравнивание.

HTML

Код

CSS

Код

.third {
width: 439px;
height: 95px;
}

.sprite_face_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png') ;
background-position: -47px -28px;
width: 55px;
height: 54px;
float:left;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_face_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position:-47px -96px;
width: 55px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.sprite_rss_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png') ;
background-position: -106px -28px;
width: 56px;
height: 54px;
margin-left:5px;
float:left;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_rss_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -106px -96px;
width: 56px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.sprite_linked_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -167px -28px;
width: 56px;
height: 54px;
margin-left:5px;
float:left;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_linked_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -167px -96px;
width: 56px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.sprite_pint_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -229px -28px;
width: 56px;
height: 54px;
float:left;
margin-left:5px;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_pint_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position:-229px -96px;
width: 56px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.sprite_share_rotate {

background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -291px -28px;
width: 54px;
height: 54px;
float:left;
margin-left:5px;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_share_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png') ;
background-position: -290px -96px;
width: 56px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.sprite_youtube_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png') ;
background-position: -350px -28px;
width: 55px;
height: 54px;
margin-left:5px;
float:left;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_youtube_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png') ;
background-position: -350px -96px;
width: 56px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.sprite_twitter_rotate {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -411px -28px;
width: 55px;
height: 54px;
margin-left:5px;
float:left;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.sprite_twitter_rotate:hover {
background: url('http://zornet.ru/Aben/ABGDA/zornet_ru/Social_zornet_ru.png');
background-position: -411px -96px;
width: 55px;
height: 54px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

Если вы хотите изменить цвета в одном местоположении, вам нужно настроить таблицу стилей, чтобы приспособить изменения, характерные для местоположения.

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

07 Марта 2018 Просмотров: 1902 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0