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

Красивые вкладки табы с использованием CSS

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

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

Приступаем к установке:

HTML

Код

<div class="tabbed">
  <input type="radio" name="tabs" id="tab-nav-1" checked>
  <label for="tab-nav-1">Первая</label>
  <input type="radio" name="tabs" id="tab-nav-2">
  <label for="tab-nav-2">Вторая</label>
  <input type="radio" name="tabs" id="tab-nav-3">
  <label for="tab-nav-3">Третья</label>
  <input type="radio" name="tabs" id="tab-nav-4">
  <div class="tabs">
  <div>

  <h2>ZorNet.Ru Создание сайта</h2>
  <p>Здесь будет идти первое описание или мануал</p>
  </div>
  <div>
  <h2>Sign up</h2>
  <p>Под описание на второй номер.</p>

  </div>
  <div>
  <h2>Reset Password</h2>
  <p>Это уже на третий переключатель</p>
  </div>
  </div>
  </div>

CSS

Код

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #0a0909;
  color: #fdfdfd;
  font-family: helvetica, arial, sans-serif;
}

::selection {
  background-color: #4EC6DE;
}

.tabbed {
  width: 500px;
  margin: 30px auto;
}

.tabbed > input {
  display: none;
}

.tabbed > label {
  display: block;
  float: left;
  padding: 12px 20px;
  margin-right: 5px;
  cursor: pointer;
  border: 2px solid #333;
  border-radius: 3px 3px 0px 0px;
  font-size: 1.4em;
}

.tabbed > label:hover, .tabbed > input:checked + label {
  background: #2fa6bd;
  color: black;
  font-size: 1.4em;
  border: 2px solid #217c8e;
}

.tabs {
  clear: both;
  perspective: 600px;
}

.tabs > div {
  width: 573px;
  position: absolute;
  border: 2px solid #19bada;
  padding: 7px 27px 35px;
  line-height: 1.4em;
  opacity: 0;
  z-index: 0;
}

#tab-nav-1:checked ~ .tabs > div:nth-of-type(1),
#tab-nav-2:checked ~ .tabs > div:nth-of-type(2),
#tab-nav-3:checked ~ .tabs > div:nth-of-type(3)
{
  transform: rotateX(0);
  opacity: 1;
  z-index: 1;
}

.inputItem {
  background-color: #fff;
  border: 2px solid #4EC6DE;
  font-size: 1.4em;
  height: 2em;
  padding-left: 0.4em;
  width: 100%;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  color: #fbf5f5;
  background-color : #252424;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
textarea:hover {
  color: #000;
  background-color : #4EC6DE;
}

.buttonItem {
  background-color: #000;
  border: 2px solid #4EC6DE;
  color: #fff;
  font-size: 1.4em;
  height: 2em;
  min-width: 6em;
}
.buttonItem:hover {
  background-color: #4EC6DE;
  color: black;
}
.avatar-wrapper {
  justify-content: center;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 700px) {
  .tabbed { width: 340px }
  .tabbed > label { display: none }
  .tabs > div {
  width: 350px;
  border: none;
  padding: 0;
  opacity: 1;
  position: relative;
  transform: none;
  margin-bottom: 60px;
  }
  .tabs > div h2 {
  border-bottom: 2px solid #4EC6DE;
  padding-bottom: .5em;
  }
}

Надеюсь, что вам понятен установочный процесс, где такде можете написать в комментариях по материалу.

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

21 Апреля 2018 Просмотров: 2157 Комментариев: (0)

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

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

Kosten

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