Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Переключатели и кнопки » Блок "Поделиться в социальных сетях"

Блок "Поделиться в социальных сетях"

Опубликовал: artCreative™
Категория: Переключатели и кнопки
Дата: 20 Июня 2025 в 14:53

1 голос

HTML

Мы определим секцию и создадим в ней список с нашими кнопками дам им классы наших соц.сетей. Так же 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>
  <a href="#" class="link">
  <div class="submenu">
  <label for="1">URL:</label>
  <input type="text" value='http://mysite.com/' id="1" onclick="select(this);" readonly>
  <label for="2">HTML:</label>
  <input type="text" value='<a href="http://mysite.com/">mysite.com</a>' id="2" onclick="select(this);" readonly>
  <label for="3">BB code:</label>
  <input type="text" value='mysite.com' id="3" onclick="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('/img/google.png');
}

.facebook {
  background: url('/img/facebook.png');
}

.vk {
  background: url('/img/vk.png');
}

.twitter {
  background: url('/img/twitter.png');
}

.link {
  background: url('/img/link.png');
}

Примечание! При создании был использован CSS - Normalize(Reset), поэтому при добавлении на свой сайт без этих стилей, вам нужно будет подстроить стили под себя!

Теперь сохраняем изображения и заливем их в папку img

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 655 « Назад

Теги материала: социальных, блок, сетях, Поделиться

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Переключатели и кнопки » Блок "Поделиться в социальных сетях"

Блок "Поделиться в социальных сетях"

Комментарии пользователей