» »

Вкладки с темными переключателями (Tabs) на CSS

Вкладки с темными переключателями (Tabs) на CSS

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

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

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

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

HTML

Код
<div class="teamagaming">
  <input checked id="one" name="teamagaming" type="radio">
  <label for="one">Первый</label>
  <input id="two" name="teamagaming" type="radio" value="Two">
  <label for="two">Второй</label>
  <input id="three" name="teamagaming" type="radio">
  <label for="three">Третий</label>
  <input id="four" name="teamagaming" type="radio">
  <label for="four">Четвертый</label>
  <div class="kotechnolog-saplat">
  <div class="lasertunresa">
  <h2>HTML и CSS</h2>

  <p>Также все в знаках и цифрах.</p>
  <p>Вообщем опять какое то описание</p>
  </div>
  <div class="lasertunresa">
  <h2>ZorNet.Ru - портал вебмастера</h2>

  <p>Здесь аналогично все описываем</p>
  <p>Зсякие разные буквы.</p>
  </div>
  <div class="lasertunresa">
  <h2>Шаблоны для uCoz</h2>

  <p>Этот самый первый</p>
  <p>Еще один, но не крайний</p>
  <p>Второй столбик под разную хре...</p>
  </div>
  <div class="lasertunresa">
  <h2>Скрипты для uCoz</h2>

  <p>Первое здесь пишем</p>
  <p>Собака автоматически просматривает.</p>
  </div>
  </div>
</div>

CSS

Код
.teamagaming {
  width: 100%;
  max-width: 590px;
  margin: 95px auto;
}
input {
  opacity: 0;
}
label {
  cursor: pointer;
  background: -webkit-linear-gradient(#777171, #312e2e);
  color: #ececec;
  border-radius: 3px 3px 0 0;
  padding: 1.5% 3%;
  float: left;
  margin-right: 1.8px;
  font: italic 1em cambria;
}
label:hover {
  background: -webkit-linear-gradient(#636060, #adacac);
}
input:checked + label {
  background: #fff;
  color: #333;
}
.teamagaming input:nth-of-type(1):checked ~ .kotechnolog-saplat .lasertunresa:first-child, .teamagaming input:nth-of-type(2):checked ~ .kotechnolog-saplat .lasertunresa:nth-child(2), .teamagaming input:nth-of-type(3):checked ~ .kotechnolog-saplat .lasertunresa:nth-child(3), .teamagaming input:nth-of-type(4):checked ~ .kotechnolog-saplat .lasertunresa:last-child {
  opacity: 1;
  -webkit-transition: .3s;
}
.kotechnolog-saplat {
  float: left;
  clear: both;
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 0 9px 9px 9px;
  min-height: 297px;
}
.lasertunresa {
  width: 100%;
  opacity: 0;
  position: absolute;
  background: #f7f4f4;
  border-radius: 0 8px 8px 9px;
  padding: 3%;
  box-sizing: border-box;
}
.lasertunresa h2 {
  margin: 0;
  font-family: Arial;
}

Здесь можно сказать, что это Простое решение tabs на HTML и CSS, которое идет на разную тематику и можно настроить под различный стиль.

Демонстрация
10.08.2018 Просмотров: 198 Комментарий: (0)

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

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

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