Componente de pestañas CSS puro con transiciones entre alturas variables

Vista prévia

Descripción

Un componente de pestañas construido usando CSS/CSS3 y Hack de entrada de radio que cuenta con la transición entre alturas variables.

Funcionamiento

Crear pestañas basadas en botones de radio y contenido con pestañas como sigue.

<div class="tab-wrap">


<input type="radio" id="tab1" name="tabGroup1" class="tab" checked>

<label for="tab1">Section One</label>


<input type="radio" id="tab2" name="tabGroup1" class="tab">

<label for="tab2">Section Two</label>


<input type="radio" id="tab3" name="tabGroup1" class="tab">

<label for="tab3">Section Three</label>


<div class="tab-content">


<h3>Section One</h3>


<p>...</p>

</div>


<div class="tab-content">


<h3>Section Two</h3>


<p>...</p>

</div>


<div class="tab-content">


<h3>Section Three</h3>


<p>...</p>

</div>

</div>

El CSS básico para el estilo del componente de pestañas.

.tab-wrap {

-webkit-transition: 0.3s box-shadow ease;

transition: 0.3s box-shadow ease;

border-radius: 6px;

max-width: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

position: relative;

list-style: none;

background-color: #fff;

margin: 40px 0;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.tab-wrap:hover { box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19); }

.tab { display: none; }

El botón de radio + truco botón para cambiar entre el contenido con pestañas.

.tab:checked:nth-of-type(1) ~ .tab-content:nth-of-type(1) {

opacity: 1;

-webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;

transition: 0.5s opacity ease-in, 0.8s transform ease;

position: relative;

top: 0;

z-index: 100;

-webkit-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(2) ~ .tab-content:nth-of-type(2) {

opacity: 1;

-webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;

transition: 0.5s opacity ease-in, 0.8s transform ease;

position: relative;

top: 0;

z-index: 100;

-webkit-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(3) ~ .tab-content:nth-of-type(3) {

opacity: 1;

-webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;

transition: 0.5s opacity ease-in, 0.8s transform ease;

position: relative;

top: 0;

z-index: 100;

-webkit-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(4) ~ .tab-content:nth-of-type(4) {

opacity: 1;

-webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;

transition: 0.5s opacity ease-in, 0.8s transform ease;

position: relative;

top: 0;

z-index: 100;

-webkit-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(5) ~ .tab-content:nth-of-type(5) {

opacity: 1;

-webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;

transition: 0.5s opacity ease-in, 0.8s transform ease;

position: relative;

top: 0;

z-index: 100;

-webkit-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

text-shadow: 0 0 0;
}

.tab:first-of-type:not(:last-of-type) + label {

border-top-right-radius: 0;

border-bottom-right-radius: 0;
}

.tab:not(:first-of-type):not(:last-of-type) + label { border-radius: 0; }

.tab:last-of-type:not(:first-of-type) + label {

border-top-left-radius: 0;

border-bottom-left-radius: 0;
}

.tab:checked + label {

background-color: #fff;

box-shadow: 0 -1px 0 #fff inset;

cursor: default;
}

.tab:checked + label:hover {

box-shadow: 0 -1px 0 #fff inset;

background-color: #fff;
}

.tab + label {

box-shadow: 0 -1px 0 #eee inset;

border-radius: 6px 6px 0 0;

cursor: pointer;

display: block;

text-decoration: none;

color: #333;

-webkit-box-flex: 3;

-webkit-flex-grow: 3;

-ms-flex-positive: 3;

flex-grow: 3;

text-align: center;

background-color: #f2f2f2;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

text-align: center;

-webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;

transition: 0.3s background-color ease, 0.3s box-shadow ease;

height: 50px;

box-sizing: border-box;

padding: 15px;
}

.tab + label:hover {

background-color: #f9f9f9;

box-shadow: 0 1px 0 #f4f4f4 inset;
}

.tab-content {

padding: 10px 25px;

background-color: transparent;

position: absolute;

width: 100%;

z-index: -1;

opacity: 0;

left: 0;

-webkit-transform: translateY(-3px);

-ms-transform: translateY(-3px);

transform: translateY(-3px);

border-radius: 6px;
}