ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вкладки на чистом CSS с индикатором слайдов

Вкладки на чистом CSS с индикатором слайдов

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

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

Так выглядит материал после полного установочного процесса:

Установка:

Шрифтовые знаки в HEAD

Код

HTML

Код

<div class="listaniye-stranits">
  <header>ZorNet.Ru — сайт для вебмастера</header>
  <input type="radio" name="slaydan" checked id="home">
  <input type="radio" name="slaydan" id="blog">
  <input type="radio" name="slaydan" id="code">
  <input type="radio" name="slaydan" id="help">
  <input type="radio" name="slaydan" id="about">
  <nav>
  <label for="home" class="home"><i class="fas fa-home"></i>Файлы</label>
  <label for="blog" class="blog"><i class="fas fa-blog"></i>Статьи</label>
  <label for="code" class="code"><i class="fas fa-code"></i>Коды</label>
  <label for="help" class="help"><i class="far fa-envelope"></i>CSS</label>
  <label for="about" class="about"><i class="far fa-user"></i>HTML</label>
  <div class="slaydan"></div>
  </nav>
  <section>
  <div class="unsomasiya unsomasiya-1">
  <div class="title">Всплывающие окна Ajax</div>
  <p>Описание по заданной теме №1</p>
  </div>
  <div class="unsomasiya unsomasiya-2">
  <div class="title">Графика для сайтаa</div>
  <p>Описание по заданной теме №2</p>
  </div>
  <div class="unsomasiya unsomasiya-3">
  <div class="title">Меню для сайта</div>
  <p>Описание по заданной теме №3</p>
  </div>
  <div class="unsomasiya unsomasiya-4">
  <div class="title">Мини профиль для сайта</div>
  <p>Описание по заданной теме №4</p>
  </div>
  <div class="unsomasiya unsomasiya-5">
  <div class="title">Список значков шрифта</div>
  <p>Описание по заданной теме №5</p>
  </div>
  </section>
  </div>

CSS

Код

::selection{
  background: rgba(23,162,184,0.3);
}
.listaniye-stranits{
  max-width: 700px;
  width: 100%;
  margin: 10px auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.listaniye-stranits header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.listaniye-stranits nav{
  position: relative;
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
}
.listaniye-stranits nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  color: #17a2b8;
  font-size: 17px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
}
.listaniye-stranits nav label:hover{
  background: rgba(23,162,184,0.3);
}
#home:checked ~ nav label.home,
#blog:checked ~ nav label.blog,
#code:checked ~ nav label.code,
#help:checked ~ nav label.help,
  #about:checked ~ nav label.about{
  color: #fff;
}
nav label i{
  padding-right: 7px;
}
nav .slaydan{
  position: absolute;
  height: 100%;
  width: 20%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 5px;
  background: #17a2b8;
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#blog:checked ~ nav .slaydan{
  left: 20%;
}
#code:checked ~ nav .slaydan{
  left: 40%;
}
#help:checked ~ nav .slaydan{
  left: 60%;
}
#about:checked ~ nav .slaydan{
  left: 80%;
}
section .unsomasiya{
  display: none;
  background: #fff;
}
#home:checked ~ section .unsomasiya-1,
#blog:checked ~ section .unsomasiya-2,
#code:checked ~ section .unsomasiya-3,
#help:checked ~ section .unsomasiya-4,
#about:checked ~ section .unsomasiya-5{
  display: block;
}
section .unsomasiya .title{
  font-size: 21px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}
section .unsomasiya p{
text-align: justify;
}

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

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

13 Мая 2021 Загрузок: 7 Просмотров: 1326 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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