Creación de un control de pestañas con estilo usando Pure CSS/CSS3

Vista prévia

Descripción

Un muy fresco, pestañas animadas componente/widget/control con sutiles efectos de transición fade. Hecho con transiciones CSS y CSS3.

Funcionamiento

Crear pestañas basadas en la entrada de radio y paneles de contenido con pestañas como sigue.

<div class="tabs">

<div class="tab">


<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">


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


<div class="tab-content">Content One</div>

</div>

<div class="tab">


<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">


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


<div class="tab-content">Content Two</div>

</div>

<div class="tab">


<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">


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


<div class="tab-content">Content Three</div>

</div>
</div>

Los estilos CSS principales.

* { box-sizing: border-box; }

.tabs {

position: relative;

margin: 3rem 0;

background: #1abc9c;

height: 14.75rem;
}

.tabs::before,
.tabs::after {

content: "";

display: table;
}

.tabs::after { clear: both; }

.tab { float: left; }

.tab-switch { display: none; }

.tab-label {

position: relative;

display: block;

line-height: 2.75em;

height: 3em;

padding: 0 1.618em;

background: #1abc9c;

border-right: 0.125rem solid #16a085;

color: #fff;

cursor: pointer;

top: 0;

transition: all 0.25s;
}

.tab-label:hover {

top: -0.25rem;

transition: all 0.25s;
}

.tab-content {

padding: 1.618rem;

background: #fff;

color: #2c3e50;

border-bottom: 0.25rem solid #bdc3c7;

height: 12rem;

position: absolute;

z-index: 1;

top: 2.75em;

left: 0;

opacity: 0;

transition: all 0.35s;
}

Haga que las entradas de radio actúen como pestañas.

.tab-switch:checked + .tab-label {

background: #fff;

color: #2c3e50;

border-bottom: 0;

border-right: 0.0625rem solid #fff;

transition: all 0.35s;

z-index: 2;

top: -0.0625rem;
}

.tab-switch:checked + .tab-label:hover { top: -0.0625rem; }

.tab-switch:checked + .tab-label + .tab-content {

opacity: 1;

transition: all 0.35s;

z-index: 3;
}