Tabs animados solo con CSS

Con este código puedes poner una sección de tabs animados, sin la necesidad de utilizar jQuery. Solo debes poner esto en donde quieras que aparezcan los tabs.

Para el archivo html

<div class="tabs">
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">Tab 1</label>
        <div class="content">
            <p>Aquí va algún contenido para el tab 1</p>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">Tab 2</label>
        <div class="content">
            <p>Aquí va algún contenido para el tab 2</p>
            <img src="http://lorempixum.com/200/100/technics/">
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">Tab 3</label>
        <div class="content">
            <p>Aquí va algún contenido para el tab 3</p>
            <img src="http://lorempixum.com/200/100/nightlife/">
        </div>
    </div>
</div>

Para el archivo CSS

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

Demo

See the Pen Tabs Animados CSS by Anthuan Vasquez (@anthuanvasquez) on CodePen.

Recomendado
  • Danny Feliz

    Muy buen tutorial, gracias.