« Боковая фиксированная панель социальных иконок на CSS »

Описание материала:

Ранее мы уже делились плавающими кнопками социальных сетей, но это фиксированный виджет боковой панели, который обычно используется многими сайтами. По сути, это своего рода плагин, который создает виджет для обмена социальными данными того же типа. На многих веб-сайтах вы увидите в основном кнопку общего доступа, потому что этот дизайн является формой по умолчанию для многих плагинов.

Сегодня мы научимся создавать боковую панель социальных иконок, с фиксированной позицией. В основном, это боковая панель или боковой элемент в левом среднем положении, и есть некоторые иконки социальных сетей, такие как Facebook, Twitter, Instagram, Pinterest, Tumblr, ВКонтакте и Одноклассники. Все иконки по умолчанию серого цвета, но при наведении они становятся с оригинальным цветом и появится всплывающая подсказка для информирования о том, какая это сеть.

Этот дизайн, полностью основанный на HTML и CSS, можно назвать чистой программой CSS. Это просто концепция дизайна, вы поместили формат url в гиперссылку для совместного использования контента. Если вы сейчас думаете, как на самом деле выглядит этот социальный виджет, то посмотрите предварительный просмотр ниже, перейдя по ссылки демонстрация.

Боковая фиксированная панель социальных иконок на CSS

Установка:

Подключаем стиль, шрифт и иконки:
Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cuprum&display=swap">


HTML код:
Код
<ul class="social-ufive">
  <li><a class="fab fa-twitter"><span>Tweeter</span></a></li>
  <li><a class="fab fa-facebook-f"><span>Facebook</span></a></li>
  <li><a class="fab fa-instagram"><span>Instagram</span></a></li>
  <li><a class="fab fa-pinterest-p"><span>Pinterest</span></a></li>
  <li><a class="fab fa-tumblr"><span>Tumblr</span></a></li>
  <li><a class="fab fa-vk"><span>ВКонтакте</span></a></li>
  <li><a class="fab fa-odnoklassniki"><span>Одноклассники</span></a></li>
</ul>


CSS код:
Код
.social-ufive {
  left: 0;
  position: fixed;
  top: 30%;
}
.social-ufive li:first-child a {
  border-top-right-radius: 5px;
}
.social-ufive li:last-child a {
  border-bottom-right-radius: 5px;
}

.social-ufive a {
  background: #393939;
  color: #fff;
  text-decoration: none;
  display: block;
  height: 40px;
  width: 40px;
  font-size: 17px;
  line-height: 40px;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.social-ufive a:hover span {
  left: 120%;
  opacity: 1;
}
.social-ufive a span {
  font: 13px "Cuprum";
  border-radius: 3px;
  line-height: 24px;
  left: -100%;
  margin-top: -16px;
  opacity: 0;
  padding: 4px 8px;
  position: absolute;
  transition: opacity 0.3s, left 0.4s;
  top: 50%;
  z-index: -1;
}

.social-ufive a span:before {
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  left: -4px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
}

.social-ufive a[class*="twitter"]:hover,
.social-ufive a[class*="twitter"] span,
.social-ufive a[class*="twitter"] span:before {
  background: #00aced;
}

.social-ufive a[class*="facebook"]:hover,
.social-ufive a[class*="facebook"] span,
.social-ufive a[class*="facebook"] span:before {
  background: #3b5998;
}

.social-ufive a[class*="instagram"]:hover,
.social-ufive a[class*="instagram"] span,
.social-ufive a[class*="instagram"] span:before {
  background: #7a32af;
}

.social-ufive a[class*="pinterest"]:hover,
.social-ufive a[class*="pinterest"] span,
.social-ufive a[class*="pinterest"] span:before {
  background: #e34429;
}

.social-ufive a[class*="tumblr"]:hover,
.social-ufive a[class*="tumblr"] span,
.social-ufive a[class*="tumblr"] span:before {
  background: #395976;
}

.social-ufive a[class*="vk"]:hover,
.social-ufive a[class*="vk"] span,
.social-ufive a[class*="vk"] span:before {
  background: #4a76a8;
}

.social-ufive a[class*="odnoklassniki"]:hover,
.social-ufive a[class*="odnoklassniki"] span,
.social-ufive a[class*="odnoklassniki"] span:before {
  background: #ee8208;
}


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 34


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar