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

Вкладки с индикатором на чистом CSS3

Вкладки с индикатором на чистом CSS3
Это простые вкладки на чистом CSS, которые созданы с индикатором показа слайдов, где только задействованы стили под дизайн и функции перехода. И можно понять из заголовка, что сегодня в материале узнаете, как самостоятельно создавать вкладки с помощью индикатора, используя только HTML и CSS. Где вы сами выставите значение под различную тематику, а также с изменением цветовой палитры под разные стилистики сайта.

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

Установка:

HTML

Код
<div class="mudesamod">
  <header>Вкладки с индикатором</header>
  <input type="radio" name="pesnulad" checked id="home">
  <input type="radio" name="pesnulad" id="blog">
  <input type="radio" name="pesnulad" id="code">
  <input type="radio" name="pesnulad" id="help">
  <input type="radio" name="pesnulad" id="about">
  <nav>
  <label for="home" class="home"><i class="fas fa-home"></i>Home</label>
  <label for="blog" class="blog"><i class="fas fa-blog"></i>Blog</label>
  <label for="code" class="code"><i class="fas fa-code"></i>Code</label>
  <label for="help" class="help"><i class="far fa-envelope"></i>Help</label>
  <label for="about" class="about"><i class="far fa-user"></i>About</label>
  <div class="pesnulad"></div>
  </nav>
  <section>
  <div class="conseculad conseculad-1">
  <div class="title">Топ-5 кошельков</div>
  <p>Если вы обращали внимание на новости в сфере технологий и финансов, вы знаете, что за последние месяцы криптовалюта снова пережила стремительный рост.</p>
  </div>
  <div class="conseculad conseculad-2">
  <div class="title">Они хотят иметь</div>
  <p>Из-за этого роста и того факта, что криптовалюта никуда не денется, многие малые предприятия хотят участвовать в этой сфере. Они хотят иметь возможность принимать криптовалютные платежи, чтобы открыть свои физические или интернет-магазины для совершенно новой аудитории.</p>
  </div>
  <div class="conseculad conseculad-3">
  <div class="title">Кошелек WLX</div>
  <p>Для этого им часто потребуется заручиться помощью кошелька с криптовалютой. Это поможет им безопасно и надежно отправлять, хранить и получать криптовалюту. Но из-за того, что рекламируется так много вариантов кошельков, какие из них лучше всего использовать? В этом сообщении блога мы рассмотрим некоторые из них.</p>
  </div>
  <div class="conseculad conseculad-4">
  <div class="title">Этот кошелек</div>
  <p>Этот кошелек также отлично подходит для совершения платежей. Вы можете совершать глобальные переводы, обеспечивать мгновенные платежи и даже автоматизировать повторяющиеся платежи с течением времени. Безопасность, предлагаемая этим кошельком, без сомнения, является одной из их сильных сторон. </p>
  </div>
  <div class="conseculad conseculad-5">
  <div class="title">От шифрования</div>
  <p>От шифрования данных до регулярных аудитов и тестов команда сосредоточена на обеспечении безопасности ваших монет и токенов.</p>
  </div>
  </section>
  </div>

CSS

Код
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  overflow: hidden;
  padding: 0 20px;
  background: #17a2b8;
}
::selection{
  background: rgba(23,162,184,0.3);
}
.mudesamod{
  max-width: 700px;
  width: 100%;
  margin: 200px auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.mudesamod header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.mudesamod nav{
  position: relative;
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
}
.mudesamod 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;
}
.mudesamod 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 .pesnulad{
  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 .pesnulad{
  left: 20%;
}
#code:checked ~ nav .pesnulad{
  left: 40%;
}
#help:checked ~ nav .pesnulad{
  left: 60%;
}
#about:checked ~ nav .pesnulad{
  left: 80%;
}
section .conseculad{
  display: none;
  background: #fff;
}
#home:checked ~ section .conseculad-1,
#blog:checked ~ section .conseculad-2,
#code:checked ~ section .conseculad-3,
#help:checked ~ section .conseculad-4,
#about:checked ~ section .conseculad-5{
  display: block;
}
section .conseculad .title{
  font-size: 21px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}
section .conseculad p{
text-align: justify;
}

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

Демонстрация
2020-12-31 Загрузок: 1 Просмотров: 315 Комментарий: (0)

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

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

Оставь свой отзыв

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