Статьи
Xiaomi Redmi Note 8 Pro получение прав ROOT
Раздача интернета в обход ограничениям использования телефона в качестве модема.
Вышел новый флагман Xiaomi Mi Note 2
100% Pure Platinum Whey (SAN) - входит в топ 15 протеинов 2016г
Power System Triple Whey - биоактивный протеин нового поколения
Weider Gold Whey - Лучшее соотношение цена-качество!
Optimum Nutrition Platinum Hydro Whey - протеин сывороточный гидролизат
Do4a Lab Premium Whey 60% - отечественный производитель
Для UCOZ
Кнопки вверх и вниз с функцией запоминания позиции
Скрипт топ пользователей по кол. сообщений на форуме для uCoz
Вид опроса для uCoz, в стиле flat
Вертящиеся часы для сайта
Темный информер Самые Популярные Темы для uCoz
Cкрипт подробной статистики сайта
Поиск по новостям для uCoz
Информер Случайные новости для uCoz
Виджет социальных закладок
Игровое онлайн радио Tort.FM
Админ всегда онлайн для Ucoz
БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
Статистика кто посетил в красивом стиле для uCoz
Красивая кнопка вверх для блога ( сайта )
Главная »
2013 »
Июль »
21 » БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
15:49
БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
И так начнем Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 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), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!
Просмотров: 937 |
Добавил: DoG
| Рейтинг: 0.0 /0
Похожие материалы
К сожалению, похожего ничего не нашлось!
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]