Pure-CSS3-Tabs

index.html

<div class="page-wrap">
  <h1>
    Pure CSS Tab
  </h1>
  <ul class="tab-wrap">
    <li>
      <input type="radio" id="tab-1" name="tab" checked />
      <label for="tab-1" class="label-1">
        Tab 1
      </label>
      <article class="tab-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam laboriosam voluptatem optio cupiditate aliquam culpa doloremque perspiciatis unde blanditiis repellendus consequuntur rerum accusamus, minus pariatur voluptatum assumenda ad adipisci esse!
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad reprehenderit, ducimus tempore quidem iste quisquam! Illum voluptatibus ad rerum possimus quisquam distinctio, quaerat quod beatae quas, soluta, vel esse consequatur!
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, illo itaque ratione tempore eius eos ab, aperiam, repellendus sequi, qui et. Nobis repellat, qui voluptate iste asperiores temporibus provident ex.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum laboriosam porro eum ea eos nihil a dolores corrupti libero, nobis, sequi voluptatum? Unde accusamus laborum ex reiciendis quibusdam aliquam repellat.
        </p>
      </article>
    </li>
    <li>
      <input type="radio" id="tab-2" name="tab" />
      <label for="tab-2" class="label-2">
        Tab 2
      </label>
      <article class="tab-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, culpa molestias delectus incidunt cum sed impedit aperiam aspernatur aliquam eos. Provident velit minus quia ea amet. Reprehenderit, voluptatem, explicabo. Consequuntur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis amet repellat, nam. Beatae consequatur ratione quas omnis similique, alias, doloremque quam soluta rem libero eum error nesciunt maxime iure deleniti!
        </p>
        <p>
          Assumenda rerum dolorum sapiente, voluptatibus nobis dolore debitis autem sed eos inventore odio provident quae molestiae quibusdam voluptate dicta neque, quisquam necessitatibus, expedita aliquam earum alias corrupti! Maxime, quia deleniti!
        </p>
        <p>
          Quidem sunt quae cumque laborum incidunt commodi nam impedit cupiditate molestiae quia, aperiam hic nobis ullam esse neque natus saepe provident excepturi sed, iusto similique fuga libero nisi quod mollitia.
        </p>
        <p>
          Atque voluptas doloremque vel, reprehenderit molestiae modi corrupti assumenda vitae at totam accusamus a autem consectetur, expedita veniam ut sapiente distinctio aliquid eum rerum eos accusantium dolor voluptatibus. Consectetur, voluptate.
        </p>
      </article>
    </li>
    <li>
      <input type="radio" id="tab-3" name="tab" />
      <label for="tab-3" class="label-3">
        Tab 3
      </label>
      <article class="tab-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, culpa molestias delectus incidunt cum sed impedit aperiam aspernatur aliquam eos. Provident velit minus quia ea amet. Reprehenderit, voluptatem, explicabo. Consequuntur.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde itaque consequatur sequi repellendus, ipsa quo neque. A eaque veritatis earum, aliquid dolorum itaque tempore, aliquam eum, culpa expedita doloremque nihil.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, sapiente. Doloremque quos eius consequuntur alias perspiciatis ratione deserunt soluta nulla sequi, nihil iste sint debitis ea, doloribus eos non. Eligendi?
        </p>
      </article>
    </li>
  </ul>
</div>

pure-css3-tabs.markdown

Pure CSS3 Tabs

Using CSS, It is possible to make pure CSS tabbed navigation with HTML radio hack and CSS3 selector.

A Pen by Nikul Lakhani on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: #333;
}

.page-wrap {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-size: 2rem;
  font-weight: bold;
  padding: 0;
  margin: 20px 0;
  color: #fff;
  text-align: center;
}

p {
  font-size: 1rem;
  line-height: 1.5rem;
}

input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tab-wrap {
  width: 100%;
  float: none;
  list-style: none;
  position: relative;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.tab-wrap li {
  float: left;
  display: block;
}

.tab-wrap label {
  position: relative;
  display: inline-block;
  padding: 1.5em 1.5em 1em;
  color: inherit;
  text-decoration: none;
  margin: 0 10px 0 0px;
}

.label-1 {
  z-index: 100;
}

.label-2 {
  z-index: 90;
}

.label-3 {
  z-index: 80;
}

.tab-wrap label:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: -1;
  border: .1em solid #aaa;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

  -webkit-transform: perspective(5px) rotateX(2deg);
    transform: perspective(5px) rotateX(2deg);
    
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
}

.tab-wrap .tab-content {
  z-index: 200;
  display: none;
  overflow: hidden;
  width: 100%;
  position: absolute;
  top: 53px;
  left: 0;
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  border: .1em solid #aaa;
  border-top: 0;
}

.tab-wrap [id^="tab"]:checked + label {
  z-index: 200;
  margin-bottom: -1px;
  border-top-width: 1px;
}

.tab-wrap [id^="tab"]:checked + label:before {
  background: #fff;
}

.tab-wrap [id^="tab"]:checked ~ .tab-content{
  display: block;
}

Pure CSS3 Tabs