Interfaz de pestañas con Desvanecimiento cruzado en Pure CSS/CSS3

Vista prévia

Descripción

Una interfaz de pestañas CSS/CSS3 pura donde se puede cambiar entre el contenido con pestañas con una animación de desvanecimiento.

Funcionamiento

Cree el contenido con pestañas y la navegación por la pestaña basada en la entrada de radio como:

<div data-tabs class="tabs">



 <div class="tab">



<input type="radio" name="tabgroup" id="tab-1" checked>



<label for="tab-1">Tab 1</label>



<div class="tab__content">




 <h4>Tab heading 1</h4>



</div>


</div>

 <div class="tab">



<input type="radio" name="tabgroup" id="tab-2">



<label for="tab-2">Tab 2</label>



<div class="tab__content">




 <h4>Tab heading 2</h4>



</div>


</div>

 <div class="tab">



<input type="radio" name="tabgroup" id="tab-3">



<label for="tab-3">Tab 3</label>



<div class="tab__content">




 <h4>Tab heading 3</h4>



</div>


</div>

 <div class="tab">



<input type="radio" name="tabgroup" id="tab-4">



<label for="tab-4">Tab 4</label>



<div class="tab__content">




 <h4>Tab heading 4</h4>



</div>


</div>
</div>

Las reglas principales de CSS/CSS3 para la interfaz de pestañas.

.tabs {

clear: both;

position: relative;

max-width: 650px;

margin: 0 auto;
}

.tab { float: left; }

.tab__content {

position: absolute;

top: 40px;

left: 0;

right: 0;

bottom: 0;

transition: opacity .2s cubic-bezier(.42, 0, .34, 1.01);

opacity: 0;
}

Active la pestaña navegación.

.tab label {

margin-right: 20px;

position: relative;

top: 0;

cursor: pointer;

color: #333;

text-transform: uppercase;
}

.tab [type=radio] { display: none; }

[type=radio]:checked ~ label {

border-bottom: 2px solid #1d1d1d;

color: #1d1d1d;

z-index: 2;
}

[type=radio]:checked ~ label ~ .tab__content {

z-index: 1;

opacity: 1;
}