Cree un componente de pestañas adaptables mediante CSS y entrada de radio

Vista prévia

Descripción

Solo otro componente de pestañas animado y totalmente receptivo implementado en CSS/CSS3 puro que utiliza botones de radio para alternar entre paneles con pestañas haciendo clic en la pestaña de navegación. Verá un acordeón vertical cuando abra la página demo en pantallas pequeñas.

Funcionamiento

La estructura HTML necesaria para el componente de fichas.

<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>

</div>


<div class="tab__content">


<h3>Section Two</h3>

</div>


<div class="tab__content">


<h3>Section Three</h3>

</div>

</div>

Los estilos primarios CSS/CSS3.

.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; }

.tab__content {

padding: 10px 25px;

background-color: transparent;

position: absolute;

width: 100%;

z-index: -1;

opacity: 0;

left: 0;

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

transform: translateY(-3px);

border-radius: 6px;
}

El botón de radio + etiquetas hacks.

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

opacity: 1;

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

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

position: relative;

top: 0;

z-index: 100;

-webkit-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.2s transform ease;

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

position: relative;

top: 0;

z-index: 100;

-webkit-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.2s transform ease;

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

position: relative;

top: 0;

z-index: 100;

-webkit-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.2s transform ease;

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

position: relative;

top: 0;

z-index: 100;

-webkit-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 {

width: 100%;

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;
}
@media (min-width:768px) {

.tab + label { width: auto; }
}

.tab + label:hover {

background-color: #f9f9f9;

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