Tabs Animados con CSS

Tabs Animados con CSS

Español | Código Fuente | Online | Publicación: 2014 | Pass:www.detodoprogramacion.org

Descripción:
En este tutorial aprenderemos como realizar el efecto TAB tan solo con CSS puro, es simple de implementar y claro que pueden mejorarlo, Manos a la obra!

Implementamos el Html Básico:
<div class="tabs"> <div class="tab"> <input checked="" id="tab-1" name="tab-group-1" type="radio" /> <label for="tab-1">Tab 1</label> <br /> <div class="content"> Detodoprogramacio.com - El mundo de la Programación en tus Manos!<br> <img src="http://lorempixum.com/200/100/nightlife/" /></div> </div> <div class="tab"> <input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">Tab 2</label> <br /> <div class="content"> Aquí va algún contenido para el tab 2<br /> <img src="http://lorempixum.com/200/100/technics/" /> </div> </div> <div class="tab"> <input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3">Tab 3</label> <br /> <div class="content"> Aquí va algún contenido para el tab 3<br /> <img src="http://lorempixum.com/200/100/nightlife/" /> </div> </div> </div>

Y luego el CSS necesario para lograr el Tab:
.tabs { position: relative; min-height: 200px; clear: both; margin: 25px 0; } .tab { float: left; } .tab label { background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; } .tab [type=radio] { display: none; } .content { position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; overflow: hidden; } .content > * { opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } [type=radio]:checked ~ label { background: white; border-bottom: 1px solid white; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; } [type=radio]:checked ~ label ~ .content > * { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); }

Capturas:

Ver Demostración