Главная » 2013 » Сентябрь » 7 » Иконки русскоязычных соц. сетей на спрайтах (Скрипты для ucoz)
07.09.2013, 02:41

Иконки русскоязычных соц. сетей на спрайтах



Сама идея взята отсюда, но там иконки не бесплатные и на них watermark, поэтому сделал свои.
Установка не сложная, выбирайте нужные иконки и подключайте себе на сайт.

1. HTML стандартных иконок:

Код

<div class="socialbar">
  <ul class="ss">
  <li class="icq"><a href="#" title="icq">icq</a></li>
  <li class="skype"><a href="#" title="skype">skype</a></li>
  <li class="twitter"><a href="#" title="twitter">twitter</a></li>
  <li class="facebook "><a href="#" title="facebook">facebook</a></li>
  <li class="vkontakte"><a href="#" title="vkontakte">vkontakte</a></li>
  </ul>
</div>


2. HTML прозрачных иконок:

Код

<div class="socialbar_transparent borderless">
  <ul class="ss">
  <li class="icq"><a href="#">icq</a></li>
  <li class="skype"><a href="#">skype</a></li>
  <li class="twitter"><a href="#">twitter</a></li>
  <li class="facebook "><a href="#">facebook </a></li>
  <li class="vkontakte"><a href="#">vkontakte</a></li>
  </ul>
</div>


3. HTML круглых иконок:

Код

<div class="socialbar_transparent borderless">
  <ul class="ss sscircle">
  <li class="icq"><a href="#">icq</a></li>
  <li class="skype"><a href="#">skype</a></li>
  <li class="twitter"><a href="#">twitter</a></li>
  <li class="facebook "><a href="#">facebook </a></li>
  <li class="vkontakte"><a href="#">vkontakte</a></li>
  </ul>
</div>


4. HTML маленьких, прозрачных иконок:

Код

<div class="socialbar_mini borderless">
  <ul class="ssm">
  <li class="icq"><a href="#">icq</a></li>
  <li class="skype"><a href="#">skype</a></li>
  <li class="twitter"><a href="#">twitter</a></li>
  <li class="facebook "><a href="#">facebook </a></li>
  <li class="vkontakte"><a href="#">vkontakte</a></li>
  </ul>
</div>


5. HTML маленьких, круглых иконок:

Код

<div class="borderless">
  <ul class="ssm sscircle">
  <li class="icq"><a href="#">icq</a></li>
  <li class="skype"><a href="#">skype</a></li>
  <li class="twitter"><a href="#">twitter</a></li>
  <li class="facebook "><a href="#">facebook </a></li>
  <li class="vkontakte"><a href="#">vkontakte</a></li>
  </ul>
</div>


6. Стили CSS для всех иконок:

Код

/* Social Bar
================================================== */

.socialbar {
  width: 100%;
  min-height: 40px;
  background-color: #FFFFFF;
  padding: 0;
  font-size: 0;
  z-index: 999;
}

.socialbar:after {
  clear: left;
  content: " ";
}

.socialbar_transparent {
  width: 100%;
  min-height: 40px;
  padding: 0;
  font-size: 0;
  z-index: 999;
}

.socialbar_transparent:after {
  clear: left;
  content: " ";
}

.borderless .ss li { border: none; }
.borderless .ss li:first-child { border: none; }

.borderless li { border: none; }
.borderless li:first-child { border: none; }

/* Social Sprites: Shapes
================================================== */

.sssquare { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
.sscircle { overflow: visible !important; }
.sscircle li { border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; background-color: #FFF;
-webkit-box-shadow:0 2px rgba(0,0,0,0.3);  
  -moz-box-shadow: 0 2px rgba(0,0,0,0.3);  
  box-shadow:0 2px rgba(0,0,0,0.3);  
   
  margin-right: 5px !important;
   
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color all 0.2s linear;
  -ms-transition: background-color all 0.2s linear;
  transition: background-color all 0.2s linear; }

.sscircle li:active, .sscircle li a:active { border-radius: 100% !important; -moz-border-radius: 100% !important; -webkit-border-radius: 100% !important; }

/* Social Sprites: General Listing
================================================== */

.ss {
  width: auto;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.ss li {
  display: inline-block;
  margin: 0;
  padding: 0;
  border-right: 1px solid rgba(0,0,0,0.2);
  background-image:url("../images/socialsprites.png");
  background-repeat: no-repeat;
   
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.ss li:hover {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.ss li:first-child {
  border-left: 1px solid rgba(0,0,0,0.2);
}

.ss li a {
  display: block;
  text-indent: -9999;
  height: 40px;
  width: 40px;
}

.ss li a:active {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
  -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
}

/* Social Sprites: Icon Classes
================================================== */

.ss li.icq { background-position: 0 0; }
.ss li.icq:hover { background-position: 0 -40px; }
.ss li.skype { background-position: 0 -80px; }
.ss li.skype:hover { background-position: 0 -120px; }
.ss li.twitter { background-position: 0 -160px; }
.ss li.twitter:hover { background-position: 0 -200px; }
.ss li.facebook { background-position: 0 -240px; }
.ss li.facebook:hover { background-position: 0 -280px; }
.ss li.vkontakte { background-position: 0 -320px; }
.ss li.vkontakte:hover { background-position: 0 -360px; }
.ss li.youtube { background-position: 0 -400px; }
.ss li.youtube:hover { background-position: 0 -440px; }
.ss li.odnoklassniki { background-position: 0 -480px; }
.ss li.odnoklassniki:hover { background-position: 0 -520px; }
.ss li.google { background-position: 0 -560px; }
.ss li.google:hover { background-position: 0 -600px; }
.ss li.mymailru { background-position: 0 -640px; }
.ss li.mymailru:hover { background-position: 0 -680px; }
.ss li.livejournal { background-position: 0 -720px; }
.ss li.livejournal:hover { background-position: 0 -760px; }
.ss li.moikrug { background-position: 0 -800px; }
.ss li.moikrug:hover { background-position: 0 -840px; }
.ss li.badoo { background-position: 0 -880px; }
.ss li.badoo:hover { background-position: 0 -920px; }
.ss li.loveplanet { background-position: 0 -960px; }
.ss li.loveplanet:hover { background-position: 0 -1000px; }
.ss li.mamba { background-position: 0 -1040px; }
.ss li.mamba:hover { background-position: 0 -1080px; }
.ss li.yaru { background-position: 0 -1120px; }
.ss li.yaru:hover { background-position: 0 -1160px; }
.ss li.moemesto { background-position: 0 -1200px; }
.ss li.moemesto:hover { background-position: 0 -1240px; }
.ss li.linkedin { background-position: 0 -1280px; }
.ss li.linkedin:hover { background-position: 0 -1320px; }
.ss li.blogger { background-position: 0 -1360px; }
.ss li.blogger:hover { background-position: 0 -1400px; }
.ss li.liveinternet { background-position: 0 -1440px; }
.ss li.liveinternet:hover { background-position: 0 -1480px; }
.ss li.memori { background-position: 0 -1520px; }
.ss li.memori:hover { background-position: 0 -1560px; }
.ss li.qip { background-position: 0 -1600px; }
.ss li.qip:hover { background-position: 0 -1640px; }
.ss li.webmoney { background-position: 0 -1680px; }
.ss li.webmoney:hover { background-position: 0 -1720px; }
.ss li.qiwi { background-position: 0 -1760px; }
.ss li.qiwi:hover { background-position: 0 -1800px; }
.ss li.yamoney { background-position: 0 -1840px; }
.ss li.yamoney:hover { background-position: 0 -1880px; }
.ss li.mega { background-position: 0 -1920px; }
.ss li.mega:hover { background-position: 0 -1960px; }
.ss li.dropbox { background-position: 0 -2000px; }
.ss li.dropbox:hover { background-position: 0 -2040px; }
.ss li.yadisc { background-position: 0 -2080px; }
.ss li.yadisc:hover { background-position: 0 -2120px; }
.ss li.deviantart { background-position: 0 -2160px; }
.ss li.deviantart:hover { background-position: 0 -2200px; }
.ss li.bing { background-position: 0 -2240px; }
.ss li.bing:hover { background-position: 0 -2280px; }
.ss li.skydrive { background-position: 0 -2320px; }
.ss li.skydrive:hover { background-position: 0 -2360px; }
.ss li.wikipedia { background-position: 0 -2400px; }
.ss li.wikipedia:hover { background-position: 0 -2440px; }

/* Social Sprites Mini
================================================== */
.socialbar_mini {
  height: 30px;
  overflow: hidden;
  width: 100%;
  padding: 0;
  z-index: 999;
}

.borderless .ssm li { border: none; }
.borderless .ssm li:first-child { border: none; }

.ssm { width: auto; margin: 0; padding: 0; text-align: center; overflow: hidden; font-size: 0; }
.ssm li { display: inline-block; margin: 0 0px; padding: 0; border-right: 1px solid rgba(0,0,0,0.2); background-image:url("../images/socialsprites_mini.png"); background-repeat: no-repeat;
-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
.ssm li:hover {-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
.ssm li:first-child { border-left: 1px solid rgba(0,0,0,0.2); }
.ssm li a { display: block; text-indent: -9999; height: 30px; width: 30px; }
.ssm li a:active { box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3); }

.ssm li.icq { background-position: 0 0; }
.ssm li.icq:hover { background-position: 0 -30px; }
.ssm li.skype { background-position: 0 -60px; }
.ssm li.skype:hover { background-position: 0 -90px; }
.ssm li.twitter { background-position: 0 -120px; }
.ssm li.twitter:hover { background-position: 0 -150px; }
.ssm li.facebook { background-position: 0 -180px; }
.ssm li.facebook:hover { background-position: 0 -210px; }
.ssm li.vkontakte { background-position: 0 -240px; }
.ssm li.vkontakte:hover { background-position: 0 -270px; }
.ssm li.youtube { background-position: 0 -300px; }
.ssm li.youtube:hover { background-position: 0 -330px; }
.ssm li.odnoklassniki { background-position: 0 -360px; }
.ssm li.odnoklassniki:hover { background-position: 0 -390px; }
.ssm li.google { background-position: 0 -420px; }
.ssm li.google:hover { background-position: 0 -450px; }
.ssm li.mymailru { background-position: 0 -480px; }
.ssm li.mymailru:hover { background-position: 0 -510px; }
.ssm li.livejournal { background-position: 0 -540px; }
.ssm li.livejournal:hover { background-position: 0 -570px; }
.ssm li.moikrug { background-position: 0 -600px; }
.ssm li.moikrug:hover { background-position: 0 -630px; }
.ssm li.badoo { background-position: 0 -660px; }
.ssm li.badoo:hover { background-position: 0 -690px; }
.ssm li.loveplanet { background-position: 0 -720px; }
.ssm li.loveplanet:hover { background-position: 0 -750px; }
.ssm li.mamba { background-position: 0 -780px; }
.ssm li.mamba:hover { background-position: 0 -810px; }
.ssm li.yaru { background-position: 0 -840px; }
.ssm li.yaru:hover { background-position: 0 -870px; }
.ssm li.moemesto { background-position: 0 -900px; }
.ssm li.moemesto:hover { background-position: 0 -930px; }
.ssm li.linkedin { background-position: 0 -960px; }
.ssm li.linkedin:hover { background-position: 0 -990px; }
.ssm li.blogger { background-position: 0 -1020px; }
.ssm li.blogger:hover { background-position: 0 -1050px; }
.ssm li.liveinternet { background-position: 0 -1080px; }
.ssm li.liveinternet:hover { background-position: 0 -1110px; }
.ssm li.memori { background-position: 0 -1140px; }
.ssm li.memori:hover { background-position: 0 -1170px; }
.ssm li.qip { background-position: 0 -1200px; }
.ssm li.qip:hover { background-position: 0 -1230px; }
.ssm li.webmoney { background-position: 0 -1260px; }
.ssm li.webmoney:hover { background-position: 0 -1290px; }
.ssm li.qiwi { background-position: 0 -1320px; }
.ssm li.qiwi:hover { background-position: 0 -1350px; }
.ssm li.yamoney { background-position: 0 -1380px; }
.ssm li.yamoney:hover { background-position: 0 -1410px; }
.ssm li.mega { background-position: 0 -1440px; }
.ssm li.mega:hover { background-position: 0 -1470px; }
.ssm li.dropbox { background-position: 0 -1500px; }
.ssm li.dropbox:hover { background-position: 0 -1530px; }
.ssm li.yadisc { background-position: 0 -1560px; }
.ssm li.yadisc:hover { background-position: 0 -1590px; }
.ssm li.deviantart { background-position: 0 -1620px; }
.ssm li.deviantart:hover { background-position: 0 -1650px; }
.ssm li.bing { background-position: 0 -1680px; }
.ssm li.bing:hover { background-position: 0 -1710px; }
.ssm li.skydrive { background-position: 0 -1740px; }
.ssm li.skydrive:hover { background-position: 0 -1770px; }
.ssm li.wikipedia { background-position: 0 -1800px; }
.ssm li.wikipedia:hover { background-position: 0 -1830px; }


Смотрим ДЕМО
Материал взят с сайта infoscript.ru
Теги: Скачать Иконки русскоязычных соц. сетей на спрайтах
Скачать "Иконки русскоязычных соц. сетей на спрайтах"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Skaiman
Категория: Скрипты uCoz | Просмотров: 1143 | Добавил: Skaiman | Рейтинг: 5.0/1 |
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]