Componente de pestañas animadas con entradas de radio y CSS

Vista prévia

Descripción

Sólo otro componente de pestañas CSS puro que utiliza transiciones CSS3 para animaciones suaves, y entradas de radio para cambiar entre paneles con pestañas.

Funcionamiento

La estructura HTML para el componente de pestañas assicado con 2 paneles con pestañas.

<div class="tabs">

<div class="tab-2">


<label for="tab2-1">Tab One</label>


<input id="tab2-1" name="tabs-two" type="radio" checked="checked">


<div>



<h4>Tab One</h4>



<p>Content One</p>


</div>

</div>

<div class="tab-2">


<label for="tab2-2">Tab Two</label>


<input id="tab2-2" name="tabs-two" type="radio">


<div>



<h4>Tab Two</h4>



<p>Content Two</p>


</div>

</div>
</div>

Los estilos requeridos CSS/CSS3 y botón de radio hack para el componente de pestañas.

.tabs {

display: block;

display: -webkit-flex;

display: -moz-flex;

display: flex;

-webkit-flex-wrap: wrap;

-moz-flex-wrap: wrap;

flex-wrap: wrap;

margin: 0;

overflow: hidden;
}

.tabs [class^="tab"] label, .tabs [class*=" tab"] label {

color: #efedef;

cursor: pointer;

display: block;

font-size: 1.1em;

font-weight: 300;

line-height: 1em;

padding: 2rem 0;

text-align: center;
}

.tabs [class^="tab"] [type="radio"], .tabs [class*=" tab"] [type="radio"] {

border-bottom: 1px solid rgba(239, 237, 239, 0.5);

cursor: pointer;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

display: block;

width: 100%;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;
}

.tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus, .tabs [class*=" tab"] [type="radio"]:hover, .tabs [class*=" tab"] [type="radio"]:focus { border-bottom: 1px solid #fd264f; }

.tabs [class^="tab"] [type="radio"]:checked, .tabs [class*=" tab"] [type="radio"]:checked { border-bottom: 2px solid #fd264f; }

.tabs [class^="tab"] [type="radio"]:checked + div, .tabs [class*=" tab"] [type="radio"]:checked + div { opacity: 1; }

.tabs [class^="tab"] [type="radio"] + div, .tabs [class*=" tab"] [type="radio"] + div {

display: block;

opacity: 0;

padding: 2rem 0;

width: 90%;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;
}

.tabs .tab-2 { width: 50%; }

.tabs .tab-2 [type="radio"] + div {

width: 200%;

margin-left: 200%;
}

.tabs .tab-2 [type="radio"]:checked + div { margin-left: 0; }

.tabs .tab-2:last-child [type="radio"] + div { margin-left: 100%; }

.tabs .tab-2:last-child [type="radio"]:checked + div { margin-left: -100%; }

Eso es todo. Puede ajustar o anular los estilos CSS como se muestra arriba para crear sus propios estilos.