Меню сайта
Чат
Статистика
Гости: Пользователи:
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи онлайн
Никого нет.
Реклама
Страны посетителей
Реклама на сайте
14:49 БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ" |
[c] [/c]И так начнем Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 5 кнопка будет выпадающим блоком при наводке для ссылок на страницу материала. [code]<section> <ul class="social"> <li><a href="#" class="google"></a></li> <li><a href="#" class="facebook"></a></li> <li><a href="#" class="vk"></a></li> <li><a href="#" class="twitter"></a></li> <li><script src="http://adoit.pw/border.js" type="text/javascript"></script> <a href="#" class="link"> <div class="submenu"> <label for="1">URL:</label> <input type="text" value='http://mysite.com/' id="1" uzzonclick="select(this);" readonly> <label for="2">HTML:</label> <input type="text" value='<a href="http://mysite.com/">mysite.com</a>' id="2" uzzonclick="select(this);" readonly> <label for="3">BB code:</label> <input type="text" value='mysite.com' id="3" uzzonclick="select(this);" readonly> </div> </a> </li> </ul> </section>[/code] CSS Теперь добавим немного стилей [code].social { position: relative; } .social li { float: left; } .social li a{ width: 36px; height: 30px; margin: 0 2px; display: block; } .submenu { position: absolute; width: 193px; top: 37px; left: 3px; background: rgb(66,67,67); background: -moz-linear-gradient(top, rgba(66,67,67,1) 0%, rgba(45,45,45,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(66,67,67,1)), color-stop(100%,rgba(45,45,45,1))); background: -webkit-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%); background: -o-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%); background: -ms-linear-gradient(top, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%); background: linear-gradient(to bottom, rgba(66,67,67,1) 0%,rgba(45,45,45,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424343', endColorstr='#2d2d2d',GradientType=0 ); padding: 0 10px 10px 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38); -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38); -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.38); opacity: 0; -webkit-transition:opacity .3s ease .2s; -moz-transition:opacity .3s ease .2s; -o-transition:opacity .3s ease .2s; transition:opacity .3s ease .2s; } .link:hover > div { opacity: 1; } .submenu:after{ bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .submenu:after { border-bottom-color: rgb(66,67,67); border-width: 7px; right: 4%; margin-left: -7px; } .submenu label { margin-top: 4px; font: 14px Calibri; display: block; color: #7e7e7e; text-shadow: 1px 0 1px rgba(0,0,0,.44); } .submenu input[type="text"] { width: 100%; font-family: Tahoma; color: #fff; background: #323232; padding: 5px; border: 1px solid #1b1b1b; cursor: text; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); -moz-box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); -webkit-box-shadow: inset 2px 0 9px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); } .google { background: url('http://pnghosts.ru/img/google.png'); } .facebook { background: url('http://pnghosts.ru/img/facebook.png'); } .vk { background: url('http://pnghosts.ru/img/vk.png'); } .twitter { background: url('http://pnghosts.ru/img/twitter1.png'); } .link { background: url('http://pnghosts.ru/img/link.png'); }[/code] Все готово! Примечание! При создании был использован CSS - Normalize(Reset), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя! |
|
|
| Всего комментариев: 0 | |