ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Темным интерфейс вкладок (Tabs) на CSS

Темным интерфейс вкладок (Tabs) на CSS

Темным интерфейс вкладок (Tabs) на CSS
В этом материале представлены адаптивные переключатели вкладок, которые идут в темном и светлом формате, где задействован оригинальный дизайн. Также узнаете, как создать саму основу с вкладками с мягким дизайном пользовательского интерфейса. Где подключаем цветовую гамму, которая идет под градиент, что можно красиво выставить полностью стиль, где кнопки со своим уникальным эффектом.

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

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

Ниже идет ссылка на demo страницу, а так выглядит в темной гамме:

Вкладки (табы) с использованием CSS

Где переключив, то автоматически меняется палитра в светлый оттенок:

Красивые вкладками Tabs на HTML + CSS

Оригинальное решение по своему уникальному формированию блоков на вкладках (табов) с содержанием на чистом HTML + CSS, с элементами адаптивной вёрстки, что можно поставить под контент, как описание или онлайн плеер.

Установка:

HTML

Код
<div id="abumakupus" class="abumakupus">
  <div id="supecions" class="kudenumakupus">

  <div class="supecions">
  <a id="kuden1" data-kuden="1" class="kuden">HTML</a>
  <a id="kuden2" data-kuden="2" class="kuden">CSS</a>
  <a id="kuden3" data-kuden="3" class="kuden">jQuery</a>
  <a id="kuden4" data-kuden="4" class="kuden">PHP</a>
  </div>
   
  <div class="pusbumanu">
  <div id="Tpusbumanu1" data-kuden="1" class="Tpusbumanu">
  <p>Мы находимся в самом начале нового десятилетия цифрового маркетинга, и оно должно стать впечатляющим. Однако, как всегда, есть ошибки, которых следует избегать в стремлении к совершенству.</p>
  <p>Читайте дальше, чтобы узнать, как именно это сделать и как сделать 2020 год вашим лучшим годом в области цифрового маркетинга. </p>
  <p>По ряду причин ниша влиятельного маркетинга переживает некоторый спад. </p>
  <p class="read-more-link"><a href="#">Ссылка перехода</a></p>
  </div>
  <div id="Tpusbumanu2" data-kuden="2" class="Tpusbumanu">
  <p>С одной стороны, все большее число предприятий начали сообщать о своих инвестициях в этот вид маркетинга менее чем на звездную рентабельность инвестиций.</p>
  <p> Это также совпало с растущими затратами на влиятельный маркетинг.</p>
  <p>В 2020 году мы определенно увидим все больше и больше микро- и даже нано-влияющих, чье число последователей.</p>
  <p class="read-more-link"><a href="#">Ссылка перехода</a></p>
  </div>
  <div id="Tpusbumanu3" data-kuden="3" class="Tpusbumanu">
  <p>Эти микровключатели также более «специализированы», что означает, что вы можете найти людей, которые окажут наибольшее влияние.</p>
  <p>Наконец, следует отметить, что у микровключателей все еще есть чувство «они такие же, как у нас», которые традиционные авторитеты просто не чувствуют, становясь знаменитостями сами по себе.</p>
  <p>Внутреннего дворика, который будет больше знать об отрасли и чьи подписчики чаще покупают у вас. </p>
  <p class="read-more-link"><a href="#">Ссылка перехода</a></p>
  </div>
  <div id="Tpusbumanu4" data-kuden="4" class="Tpusbumanu">
  <p>Когда мы говорим об ошибках, которых следует избегать в кампаниях с микро-влиянием, они в значительной степени совпадают с традиционными.</p>
  <p>Вы должны убедиться, что влиятельные лица и их последователи реальны.</p>
  <p>Почтовый маркетинг был одним из основных продуктов любой конкретной маркетинговой кампании и отдела с самых первых дней.</p>
  <p class="read-more-link"><a href="#">Ссылка перехода</a></p>
  </div>
  </div>

  </div>
   
  <div class="medongin">
  <label class="nedemedon-label" for="medongin">Переключатель</label>
  <label class="nedemedon">
  <input type="checkbox" id="medongin">
  <span class="usevigned round"></span>
  </label>
  </div>  
</div>

CSS

Код
.abumakupus {
  display: flex;
  height: 100vh;
  background-color: #f4f4f4;
  color: #a2a2a2;
  font-family: "Nunito Sans", Arial, Helvetica, sans-serif;
}
.darkmode .abumakupus {
  background-color: #111215;
  color: #a09e9e;
}
.kudenumakupus {  
  width: 540px;
  max-width: 620px;  
  min-width: 420px;
  margin: auto;
}

.supecions {
  margin-bottom: 28px;  
  display: flex;
  justify-content: space-between;
}

.supecions a {
  cursor: pointer;
  padding: 11px 18px;
  width: 118px;
  text-align: center;
  font-weight: bold;
  border-radius: 35px;
  transition: background 0.1s, color 0.1s;
  background: linear-gradient(145deg, #f7f7f7, #dedede);
  box-shadow: 3px 3px 5px #b5b4b4, -3px -3px 5px #ececec;
}
.darkmode .supecions a {
  background: linear-gradient(145deg, #1c1c1f, #111217);
  box-shadow: 3px 3px 6px #2a2a2b, -3px -3px 6px #353638;
}

.supecions a:hover {
  background: linear-gradient(145deg, #f5f5f5, #bbb9b9);
  color: #6b6969;
}
.darkmode .supecions a:hover {
  background: #0e0e0e;
  color: #a5a5a5;
}

.supecions a.cadingudsa {
  background-color: #f4f4f4;
  color: #bdbdbd;
  cursor: default;
  padding: 14px 22px 10px 26px;
  background: #f4f4f4;
  box-shadow: inset 3px 3px 5px #bdbcbc,  
  inset -3px -3px 5px #f5f5f5;
}
.darkmode .supecions a.cadingudsa {
  background: #27282b;
  box-shadow: inset 3px 3px 6px #1e1f21, inset -3px -3px 6px #262729;
  color: #a29d9d;
}

.Tpusbumanu {
  padding: 46px;
  min-height: 288px;
  display: none;  
  border-radius: 18px;
  background: #f4f4f4;
  box-shadow: 3px 3px 6px #b5b2b2,  
  -3px -3px 6px #f7f7f7;
}
.darkmode .Tpusbumanu {
  background: linear-gradient(145deg, #19191b, #161617);
  box-shadow: 3px 3px 6px #060606, -3px -3px 6px #151517;
}
.pusbumanu .cadingudsa {
  display: block;
}
.Tpusbumanu p {
  margin-bottom: 12px;
}
.Tpusbumanu p:last-child {
  margin-bottom: 0;
}
.Tpusbumanu .read-more-link a {
  color: #626262;
  text-decoration: none;
  font-size: 0.85em;
  font-weight: bold;
}
.darkmode .Tpusbumanu .read-more-link a {
  color: #d4d4d4;
}

.medongin {
  position: absolute;
  top: 16px;
  right: 16px;
}
.medongin .nedemedon {
/* margin-left: 4px; */
}
.nedemedon-label {
  cursor: pointer;
  font-size: 0.85em;
}
.nedemedon {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin-left: 4px;
}
.nedemedon input {
  opacity: 0;
  width: 0;
  height: 0;
}
.usevigned {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1A1B1F;
  transition: .2s;
  box-shadow: 2px 2px 3px #ffffff, -2px -2px 3px #bebebe;
}
.darkmode .usevigned {
  box-shadow: 2px 2px 3px #34353a,  
  -2px -2px 3px #000104;
}
.usevigned:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background: #9294b8;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .usevigned {
  background-color: #f4f4f4;
}
input:checked + .usevigned:before {
  transform: translateX(21px);
}
.usevigned.round {
  border-radius: 11px;
}
.usevigned.round:before {
  border-radius: 50%;
}
@media (max-width: 650px) {
  .kudenumakupus {
  width: 100%;
  }
  .supecions {
  display: block;
  }
  .supecions a {
  width: 70px;
  }
  .Tpusbumanu {
  padding: 15px;
  }
}

JS

Код
const supecions = document.querySelectorAll('.kuden')
const Tpusbumanus = document.querySelectorAll('.Tpusbumanu')
const darkModenedemedon = document.querySelector('#medongin')
   
const activatekuden = kudennum => {
   
  supecions.forEach( kuden => {
  kuden.classList.remove('cadingudsa')
  })
   
  Tpusbumanus.forEach( Tpusbumanu => {
  Tpusbumanu.classList.remove('cadingudsa')
  })
   
  document.querySelector('#kuden' + kudennum).classList.add('cadingudsa')
  document.querySelector('#Tpusbumanu' + kudennum).classList.add('cadingudsa')
  localStorage.setItem('jssupecions-openkuden', JSON.stringify(kudennum))
   
}

supecions.forEach(kuden => {
  kuden.addEventListener('click', () => {
  activatekuden(kuden.dataset.kuden)
  })
})

darkModenedemedon.addEventListener('change', () => {
  document.querySelector('body').classList.toggle('darkmode')
  localStorage.setItem('jssupecions-darkmode', JSON.stringify(!darkmode))
})

let darkmode = JSON.parse(localStorage.getItem('jssupecions-darkmode'))
const openkuden = JSON.parse(localStorage.getItem('jssupecions-openkuden')) || '3'

if (darkmode === null) {
  darkmode = window.matchMedia("(prefers-color-scheme: dark)").matches  
}
if (darkmode) {
  document.querySelector('body').classList.add('darkmode')
  document.querySelector('#medongin').checked = 'checked'
}
activatekuden(openkuden)

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

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

Видео обзор:


Для создания этой темно светлых вкладок вам необходимо разместить несколько файлов. Первый из которых идет для HTML, второй для CSS и третий файл для JavaScript.

По установке не чего сложного нет, все делайте как расписано здесь, но для начало выберите цветовую гамму, или если рассматривать отдельную страницу, то можно оба оттенка поставить, ведь для этого в правом верхнем углу идет тумблер для переключение оттенков.
2020-02-25 Загрузок: 2 Просмотров: 283 Комментарий: (0)

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

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

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

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