Реклама №1
Рекламное место свободно Обращайтесь к Админ
Статистика
Статистика:
Всего: 593 Новых за месяц: 0 Новых за неделю: 0 Новых вчера: 0 Новых сегодня: 0 Из них Гл.Администраторов: 1 Администраторов: 0 Гл.Модераторов: 0 Модераторов: 4 Гл.Дизайнеров: 0 Дизайнеров: 1 Файловиков: 0 Проверенных: 1 Постоянных: 0 V.I.P Персон: 1 Друзья сайта: 0 Обычных юзеров: 585 Заблокированные: 0 Из них Парней: 549 Девушек: 43
Счетчик:
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Юзеры онлайн:
Нас посетили:
Главная » 2013 » Июль » 21 » БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
14:54
БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
И так начнем Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 5 кнопка будет выпадающим блоком при наводке для ссылок на страницу материала. Код
<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>
CSS Теперь добавим немного стилей Код
.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'); }
Все готово! Примечание! При создании был использован CSS - Normalize(Reset), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!
Просмотров: 367 |
Добавил: DoG
| Рейтинг: 0.0 /0
Рай для анимешника
AnimeLend.Info - сайт для фанатов аниме, у нас собранно все видео аниме онлайн. В нашей базе есть русская озвучка и субтитры, старые издания и новинки, множество жанров и категорий, тут настоящий рай для анимешника.
Мини профиль
Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
Друзья сайта
AnimeLend.info
ПОЛУЧИ ДЕНЬГИ НА КОШЕЛЁК
Место свободно
Место свободно
Топ фаловиков
casper Респект: 45Постов: 444 Файлов: 226
tema Респект: 6Постов: 1 Файлов: 26
danbdan Респект: 18Постов: 0 Файлов: 5