Псевдоэлементы (или другой метод) вместо теней для стиля вертикальных вкладок - PullRequest
Новая
       7

Псевдоэлементы (или другой метод) вместо теней для стиля вертикальных вкладок

0 голосов
/ 08 апреля 2019

Я пытаюсь создать меню с вертикальными вкладками для переключения между содержимым. Он функционирует так, как я хочу, но я бы хотел, чтобы его стиль был таким, чтобы была только одна тень (а не две отдельные тени).

Вот мой HTML: 

<div class="tab-container">
  <div class="clear-backend">

  <input type="radio" class="tab-1" name="tab" checked="checked"<span>Item One</span>
    <input type="radio" class="tab-2" name="tab"><span>Item Two</span>
    <input type="radio" class="tab-3" name="tab"><span>Item Three</span>
    <input type="radio" class="tab-4" name="tab"><span>Item Four</span>

    <div class="tab-content">
      <section class="tab-item-1"><h2>Item One</h2></section>
      <section class="tab-item-2"><h2>Item Two</h2></section>
      <section class="tab-item-3"><h2>Item Three</h2></section>
      <section class="tab-item-4"><h2>Item Four</h2></section>
    </div>

    </div>
  </div>

Вот мой CSS: 

.tab-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.clear-backend {
  background: #fff;
  width: 100%;
  height: 440px;
  position: relative;
}
.clear-backend > input {
  position: absolute;
  filter: alpha(opacity=0);
  opacity: 0;
}

.clear-backend > input:hover + span,
.clear-backend > input:checked + span {
  background: #fff;
  color: #1ABC9C;
  box-shadow: 0px 0px 8px 0px #000;  
  border: 2px solid #fff;
}
.clear-backend > input:checked + span + i {
  color: #1ABC9C;
}
.clear-backend > span {
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
     -o-transition: all .5s;
      transition: all .5s;
}
.clear-backend > input,
.clear-backend > span {
  background: #fff;
  border: 2px solid #e6e6e6;
  margin: 8px;
  display: block;
  width: 140px;
  height: 100px;
  text-align: center;
}
.tab-content {
  position: absolute;
  background: #fff;
  top: 0;
  right: 0;
  width: calc(100% - 140px);
  height: 100%;
  overflow: hidden;
  box-shadow: 0px 0px 12px 0px #000; 
}
.tab-content section {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: none;
  background: #fff; 
}
.clear-backend > input.tab-1:checked ~ .tab-content .tab-item-1 {
  display: block;
}
.clear-backend > input.tab-2:checked ~ .tab-content .tab-item-2 {
  display: block;
}
.clear-backend > input.tab-3:checked ~ .tab-content .tab-item-3 {
  display: block;
}
.clear-backend > input.tab-4:checked ~ .tab-content .tab-item-4 {
  display: block;
}

Как видите, у меня есть две тени от ящиков. Мне любопытно, есть ли способ использовать псевдоэлементы (с которыми у меня мало опыта) или какой-то другой метод, чтобы достичь того, что я надеюсь сделать.

Вот ссылки на скриншоты того, что у меня есть в настоящее время, в сравнении с тем, что я хочу:

https://i.ibb.co/bKQRzcT/Screen-Shot-2019-04-08-at-11-15-44-AM.png https://i.ibb.co/HpCzYBj/goal.png

...