Инструменты пользователя

Инструменты сайта


software:development:demo:cms:ucms:appendix:appendix_css:nav:css_sticky_social_bar

CSS липкая социальная панель

index.html
<!doctype html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <!-- запрет автоперевода перевода google translate -->
    <meta name="google" content="notranslate">
	<!-- отображение файктической ширины экрана для адаптивного дизайна -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Загрузить шрифт потрясающие иконки -->
	<link rel="stylesheet" href="/demo_ucms/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
    <title>sample.html</title>
	<!-- блок стилей css -->
	</head>
	<body>
<!-- Панель значков социальных сетей -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
  <a href="#" class="google"><i class="fa fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
 
<div class="content">
  <h3>Классический текст Lorem Ipsum, используемый с XVI века</h3>
  <p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum."
 
Абзац 1.10.32 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э.
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, 
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non 
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat 
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis 
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel 
eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
 
</p>
 </div>
 
  </body>
</html>
style.css
/* Фиксированная/липкая панель значков (выравнивается по вертикали на 50% от верхней части экрана) */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
 
/* Стиль ссылок на панели значков */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}
 
/* Стиль иконки социальных медиа с цветом, если вы хотите */
.icon-bar a:hover {
  background-color: #000;
}
 
.facebook {
  background: #3B5998;
  color: white;
}
 
.twitter {
  background: #55ACEE;
  color: white;
}
 
.google {
  background: #dd4b39;
  color: white;
}
 
.linkedin {
  background: #007bb5;
  color: white;
}
 
.youtube {
  background: #bb0000;
  color: white;
}
 
.content {
  margin-left: 75px;
  font-size: 30px;
}
Только авторизованные участники могут оставлять комментарии.
software/development/demo/cms/ucms/appendix/appendix_css/nav/css_sticky_social_bar.txt · Последнее изменение: VladPolskiy

Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki