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
Теги: Скачать Иконки русскоязычных соц. сетей на спрайтах
| |||||
Категория: Скрипты uCoz | Просмотров: 1365 | Добавил: Skaiman | Рейтинг: 5.0/1 | | |||||
Пока комментариев нет. Ты можешь быть первым! | |
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).