Interfaz de pestañas animadas estilo SciFi con Pure CSS/CSS3

Vista prévia

Descripción

Un widget de pestañas de estilo SciFi fresco que permite intercambiar entre secciones de contenido haciendo clic en las pestañas basadas botón de radio. Creado por < a href = "https://codepen.io/aaronchuo/" target = "_ blank" rel = "noopener" > aaronchuo .

Funcionamiento

Cree una interfaz de pestañas usando listas HTML y botones de radio como se muestra a continuación.

<ul class="tabs-demo">

<li>


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


<label for="tab1">Tab1</label>


<div class="section"> Section1 </div>

</li>

<li>


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


<label for="tab2">Tab2</label>


<div class="section"> Section2 </div>

</li>

<li>


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


<label for="tab3">Tab3</label>


<div class="section"> Section3 </div>

</li>

<li>


<input type="radio" name="tab" id="tab4">


<label for="tab4">Tab4</label>


<div class="section"> Section4 </div>

</li>
</ul>

Las reglas CSS/CSS3 requeridas para dar estilo a la interfaz de las pestañas y para darle a las pestañas un sutil efecto de transición al hacer clic.

.tabs-demo {
 list-style: none;
 position: relative;
 width: 600px;
 margin: 50px auto;
 padding: 0;
 font-size: 18px;
 color: #00bebe;
}

.tabs-demo * {
 -webkit-transition: all 200ms ease-in-out;
 transition: all 200ms ease-in-out;
 outline: none;
}

.tabs-demo :before,
.tabs-demo :after { content: ''; }

.tabs-demo li { display: inline-block; }

.tabs-demo li input[type=radio] {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 position: absolute;
}

.tabs-demo li input[type=radio]:checked ~ label {
 box-shadow: 0 0 10px #00dcdc;
 background: #00bebe;
 color: #212121;
 height: 50px;
 font-size: 1.2em;
 cursor: default;
}

.tabs-demo li input[type=radio]:checked ~ .section {
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
 opacity: 1;
 display: block;
 width: 500px;
 padding: 50px;
 border: 1px solid #00bebe;
 color: #00dcdc;
 letter-spacing: .1em;
 text-indent: 1em;
 z-index: 99;
}

.tabs-demo li label {
 border-radius: 5px 5px 0 0;
 display: block;
 width: 120px;
 height: 40px;
 border: 1px solid rgba(0, 190, 190, 0.7);
 border-bottom: 0;
 color: rgba(0, 190, 190, 0.7);
 line-height: 50px;
 text-align: center;
 cursor: pointer;
}

.tabs-demo li label:hover {
 height: 50px;
 border-color: #00bebe;
 color: #00bebe;
}

.tabs-demo li .section {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 position: absolute;
 top: 51px;
 left: 0;
 width: 1000px;
 padding: 50px;
 border: 1px solid #00bebe;
 background: rgba(0, 190, 190, 0.1);
 color: white;
 letter-spacing: -1em;
 text-indent: 1em;
 z-index: 1;
}