ZorNet.Ru — сайт для вебмастера » HTML и CSS » Социальная боковая панель с иконками CSS

Социальная боковая панель с иконками CSS

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

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

С мобильных гаджет:

CSS Фиксированная социальная медиа боковая панель с иконками

Установочный процесс:

Первым делом нужно поставить библиотеку и стиле под кнопки. Все это можно расположеть на странице в HEAD, где установлены кнопки.

Код

HTML

Код

<ul id="bokovaya-panel">
 <li>
 <a class="entypo-twitter">Твиттер</a>
 </li>
 <li>
 <a class="entypo-facebook">Facebook</a>
 </li>
 <li>
 <a class="entypo-gplus">Гугл плюс</a>
 </li>
 <li>
 <a class="entypo-dribbble">Dribbble</a>
 </li>
 <li>
 <a class="entypo-dropbox">Dropbox</a>
 </li>
 <li>
 <a class="entypo-github">Github</a>
 </li>
 <li>
 <a class="entypo-evernote">Evernote</a>
 </li>
</ul>

CSS

Код

@import url(https://weloveiconfonts.com/api/?family=entypo);

[class^="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
body {
  background: #e6e6e6;
}
#bokovaya-panel {
  left: 0;
  position: fixed;
  top: 30%;
}
#bokovaya-panel li:first-child a { border-top-right-radius: 5px; }
#bokovaya-panel li:last-child a { border-bottom-right-radius: 5px; }

#bokovaya-panel a {
  background: rgba(0, 0, 0, .7);
  color: #fff;
  text-decoration: none;
  display: block;
  height: 50px;
  width: 50px;
  font-size: 24px;
  line-height: 50px;
  position: relative;
  text-align: center;
  cursor: pointer;
}
#bokovaya-panel a:hover span {
  left: 120%;
  opacity: 1;
}
#bokovaya-panel a span {
  font: 12px "Open Sans", sans-serif;
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 24px;
  left: -100%;
  margin-top: -16px;
  opacity: 0;
  padding: 4px 8px;
  position: absolute;
  transition: opacity .3s, left .4s;
  top: 50%;
  z-index: -1;
}

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

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

#bokovaya-panel a[class*="facebook"]:hover,
#bokovaya-panel a[class*="facebook"] span,
#bokovaya-panel a[class*="facebook"] span:before {background: #3B5998;}

#bokovaya-panel a[class*="gplus"]:hover,
#bokovaya-panel a[class*="gplus"] span,
#bokovaya-panel a[class*="gplus"] span:before {background: #E34429;}

#bokovaya-panel a[class*="dribbble"]:hover,
#bokovaya-panel a[class*="dribbble"] span,
#bokovaya-panel a[class*="dribbble"] span:before {background: #ea4c89;}

#bokovaya-panel a[class*="dropbox"]:hover,
#bokovaya-panel a[class*="dropbox"] span,
#bokovaya-panel a[class*="dropbox"] span:before {background: #8DC5F2;}

#bokovaya-panel a[class*="github"]:hover,
#bokovaya-panel a[class*="github"] span,
#bokovaya-panel a[class*="github"] span:before {background: #9C7A5B;}

#bokovaya-panel a[class*="evernote"]:hover,
#bokovaya-panel a[class*="evernote"] span,
#bokovaya-panel a[class*="evernote"] span:before {background: #6BB130;}

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

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

Видео обзор:

16 Октября 2019 Загрузок: 2 Просмотров: 1554 Комментариев: (0)

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

СКАЧАТЬ

Материал разместил

Kosten

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