ZorNet.Ru — сайт для вебмастера » HTML и CSS » Чистый CSS интерфейс на вкладки (tabs) в 3D

Чистый CSS интерфейс на вкладки (tabs) в 3D

Данные вкладки выполнены в стилистике 3D, что отлично преобразованы при помощи стилей CSS, что оригинально смотрятся при подаче информации. Здесь представлены вкладки под свой оттенок цвета, где будут соответствовать своему переключателю. Когда будет происходить смена обзора на новости, то все происходит не стандартно, а точнее идет переворот сверху в низ. Это те же тыбы, но просто сделаны в уникальном обзоре, что аналогично можно применить как на игровой тематике, или на софт портале, здесь главное, чтоб отлично вписывалось в стилистику шаблона.

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

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

Так смотрится в тот момент, когда происходит смена.

Вкладки переключателей CSS интерфейс с 3D куб

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

HTML

Код

<div class="vuniksadem_lodsa">
<label class="zornet_ru" for="zornet_ru-one" style="cursor:pointer">Первый</label>
  <label class="zornet_ru" for="zornet_ru-two" style="cursor:pointer">Второй</label>
  <label class="zornet_ru" for="zornet_ru-three" style="cursor:pointer">Третий</label>
  <input type="radio" name="zornet_rus" id="zornet_ru-one">
  <input type="radio" name="zornet_rus" id="zornet_ru-two">
  <input type="radio" name="zornet_rus" id="zornet_ru-three">

  <div class="cube">
  <div class="vesnikla_dzadtun">
  <h1>ZORNET.RU 1</h1>
  <p>СКРИПТЫ И КОДЫ САЙТА</p>
  </div>
  <div class="vesnikla_dzadtun">
  <h1>ZORNET.RU</h1>
  <p>ШАБЛОНЫ ДЛЯ ПОРТАЛА</p>
  </div>
  <div class="vesnikla_dzadtun">
  <h1>ZORNET.RU 3</h1>
  <p>МОДАЛЬНОЕ ОКНО САЙТА</p>
  </div>
  </div>
</div>

CSS

Код

.vuniksadem_lodsa {
  -webkit-perspective: 76em;
  perspective: 76em;
  -webkit-perspective-origin: 50% 50px;
  perspective-origin: 50% 50px;
  width: 494px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}

input { display: none; }

.zornet_ru {
  position: absolute;
  width: 80px;
  height: 70px;
  background: pink;
  right: 0;
  line-height: 70px;
  font-weight: 300;
}

.zornet_ru:nth-child(1) {
  top: -5px;
  background: #0ead84;
}

.zornet_ru:nth-child(2) {
  top: 70px;
  background: #10717d;
}

.zornet_ru:nth-child(3) {
  top: 143px;
  background: #2342b5;
}

.cube {
  position: relative;
  margin: 60px auto 0;
  width: 300px;
  height: 200px;
  -webkit-transform-origin: 0 100px;
  -ms-transform-origin: 0 100px;
  transform-origin: 0 100px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s ease-in;
  transition: transform 0.5s ease-in;
}

.vesnikla_dzadtun {
  width: 300px;
  height: 200px;
  position: absolute;
}

.vesnikla_dzadtun h1 {
  font-size: 25px;
  margin: 75px 0 10px;
  font-weight: 300;
}

.vesnikla_dzadtun p { font-size: 12px; }

.vesnikla_dzadtun:nth-child(2) {
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
  background: #0d7684;
}

.vesnikla_dzadtun:nth-child(1) {
  -webkit-transform: rotateX(-270deg) translateY(-100px);
  transform: rotateX(-270deg) translateY(-100px);
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  background: #0f9673;
}

.vesnikla_dzadtun:nth-child(3) {
  -webkit-transform: rotateX(-90deg) translateY(100px);
  transform: rotateX(-90deg) translateY(100px);
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  transform-origin: bottom center;
  background: #1c38a0;
}
#zornet_ru-one:checked ~ .cube {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

#zornet_ru-two:checked ~ .cube {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

#zornet_ru-three:checked ~ .cube {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

Чтоб понять, как все будет в рабочем виде, для этого есь demo для просмотра.

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

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

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

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

Kosten

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