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.

One Response

  1. Danny Feliz
    Danny Feliz mayo 31, 2014 at 1:37 AM |

    Muy buen tutorial, gracias.

Comments are closed, but trackbacks and pingbacks are open.