Portfolio tipo acordeón con CSS3 y HTML5

¿Estás muy ocupado como para hacer un Portfolio?, aquí te traigo una simple pero funcional idea. Usando el elemento :target de CSS3 puedes crear un menú con animacion sin usar Javascript. Es muy parecido a lo que puedes hacer con SlideDeck.
Funciona en Chrome, Firefox, Ópera, Safari e IE9-10.

Uso de :target

La pseudo-clase :target permite moverse mediante enlaces con identificadores fragmentados dentro de una misma página. Así es como nos permite desplazarnos entre cada segmento del portfolio y con una pequeña transición CSS3 podemos tener un efecto muy bonito.
Empecemos, el resultado será el siguiente:

Estructura HTML5

Código :

<!doctype html>
<html class="no-js" lang="es">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="description" content="Diseñador y Programador Web">
    <meta name="author" content="Carlos Andrés Viteri">
    <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Carlos Andrés Viteri</title>
   <script src="js/libs/modernizr-2.0.6.min.js"></script>
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <article class="acordion">  
        <section id="ac1" class="ac1">  
            <h2><a href="#ac1">Carlos Andrés Viteri</a></h2> 
            <p>Soy un chico de 14 años, aficionado al diseño y la programación web, vivo en Quito-Ecuador,
            tengo experiencia con HTML5, CSS3, jQuery, aprendo PHP. Me gusta mucho el diseño gráfico.</p>  
            <img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png" width="357" height="64" alt="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" id="logohtml5">
        </section>  
        <section id="ac2" class="ac2">  
            <h2><a href="#ac2">Portfolio</a></h2>  
            <p>Algunos de mis trabajos:</p> 
            <img src="http://carlosandresviteri.com/images/website.jpg" width="165" alt="Website" class="website">
            <img src="http://carlosandresviteri.com/images/website.jpg" width="165" alt="Website" class="website">
            <img src="http://carlosandresviteri.com/images/website.jpg" width="165" alt="Website" class="website"> 
            <img src="http://carlosandresviteri.com/images/website.jpg" width="165" alt="Website" class="website">
        </section>  
        <section id="ac3" class="ac3">  
            <h2><a href="#ac3">Redes Sociales</a></h2> 
            <a href="http://www.facebook.com/carlosssasd" target="_blank"><aside>
            <img src="images/facebook.png" alt="facebook" class="imagenessinborde"><p class="redes">Facebook</p>
            </aside></a>
            <a href="http://www.twitter.com/carlosssasd" target="_blank"><aside>
            <img src="images/twitter.png" alt="twitter" class="imagenessinborde"><p class="redes">Twitter</p>  
            </aside></a>
        </section>  
        <section id="ac4">  
            <h2><a href="#ac4">Contacto</a></h2>
            <p>Contáctate conmigo te responderé lo más pronto posible. <br><span>*Llena todos los campos*</span></p>  
            <form> 
            <input type="text" placeholder="nombre y apellido" id="name">
            <input type="text" placeholder="email" id="email">
            <input type="text" placeholder="asunto" id="asunto">
            <textarea name="mensaje" placeholder="escriba su mensaje..." id="text"></textarea>
            <label for="enviar">
            <input type="submit" name="enviar" value="Enviar" id="botonEnviar"></label>
        </form>
        </section>  
    </article>  
</body>
</html>

Después de la estructuración recurimos a CSS3 con su elemento :target.

Estilo CSS3

Código :

/* font-face*/
@font-face {
    font-family: 'MuseoSans300';
    font-style: normal;
    font-weight: normal;
    src: url('http://carlosandresviteri.com/fonts/museosans-webfont.eot');
    src: url('http://carlosandresviteri.com/fonts/museosans-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://carlosandresviteri.com/fonts/museosans-webfont.woff') format('woff'),
         url('http://carlosandresviteri.com/fonts/museosans-webfont.ttf') format('truetype'),
         url('http://carlosandresviteri.com/fonts/museosans-webfont.svg#MuseoSans300') format('svg');
}
/* etiquetas */
a {
    color: #333;
}
article.acordion  {  
    background: #666;
    border-radius: 5px;  
    box-shadow: 0 0 4px rgba(0,0,0,0.4);  
    display: block;  
    margin: 0 auto; 
    margin-top: 40px; 
    padding: 0.5em 0.5em 1px 0.5em;  
    width: 26em;  
}  
article.acordion section {  
    background: #333;  
    border-radius: 3px;  
    color: #333;  
    display: block;  
    height: 2em;  
    margin: 0 0 0.5em 0;  
    overflow: hidden;  
    padding: 0 1em;
    width: 24em;  
}  
article.acordion section h2 {  
    color: #ddd;
    font-size: 1em;  
    font-weight: bold;  
    line-height: 2em;  
    margin: 0;  
    padding: 0;  
    width: 100%;  
}  
article.acordion section h2 a {  
    color: inherit;  
    display: block;  
    line-height: 2em;  
    outline: 0 none;  
    text-decoration: none;  
    width: 100%;  
}  
article.acordion section:target.ac1 {  
    height: 14em;
} 
article.acordion section:target.ac2 {  
    height: 17em;
}
article.acordion section:target.ac3 {  
    height: 11em;
} 
article.acordion section:target {  
    height: 27em;  
    background-color: #fff;  
}  
article.acordion section:target h2 {  
    color: #333;  
    font-size: 1.6em;  
}  
article.acordion section,  
article.acordion section h2 {  
    transition: all 1s ease;  
}  
aside {
    border-radius: 3px;
    cursor: pointer;
    height: 32px;
    margin: 0 auto;
    margin-top: 10px;
    padding: 4px;
    transition: all .3s linear;
    width: 114px;
}
aside:hover {
    transform: rotate(-3deg);
}
body {
    background: #e0e0e0 url(../images/noise.png);
    font-family: "MuseoSans300";
    font-size: 16px;
    margin: 0;
}
img#logohtml5 {
    margin: 14px 0 0 22px;
}
img.website {
    border: 1px solid #bbb;
    border-radius: 4px;
    margin: 12px 0 4px 16px;
}
img.website:hover {
    transform:scale(1.15);
}
p {
    margin: 0;
}
p span {
    color: #aaa;
    margin: 0 0 0 108px;
}
p.redes {
    display: inline-block;
    margin: 6px 0 0 6px;
    vertical-align: top;
}
/* divs */
#asunto {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px #fff;
    color: #222;
    font-family: "MuseoSans300";
    font-size: 14px;
    height: 24px;
    margin: 0 0 14px 21px;
    outline: none;
    padding: 3px;
    width: 200px;
}
#botonEnviar {
    background: #f3f3f3;
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    color: #111111;
    font-family: "MuseoSans300";
    height: 30px;
    margin: 0 0 0 20px;
    width: 60px;
}
#botonEnviar:hover {
    border: 1px solid #c7c7c7;
    box-shadow: 0 1px 1px rgba(0,0,0,.07);
}
#botonEnviar:active {
    border: 1px solid #c7c7c7;
    box-shadow: inset 0 2px 2px rgba(0,0,0,.15);
}
#email {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px #fff;
    color: #222;
    font-family: "MuseoSans300";
    font-size: 14px;
    height: 24px;
    margin: 0 0 14px 21px;
    padding: 3px;
    outline: none;
    width: 200px;
}
#name {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px #fff;
    color: #222;
    font-family: "MuseoSans300";
    font-size: 14px;
    margin: 18px 0 14px 21px;
    padding: 3px;
    outline: none;
    height: 24px;
    width: 200px;
}
#text {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow:0 1px #fff;
    color:#222;
    font-size: 14px;
    font-family: "MuseoSans300";
    height: 100px;
    margin: 0 0 14px 21px;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3px;
    white-space: pre-wrap;
    width: 332px;
    word-wrap: break-word;
}

* Nos evitamos usar los prefijos propietarios gracias a Prefix-free.

Espero que les sea de utilidad aquí pueden ver el demo, aún no terminado.

Demo.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Por carlosssasd el 20 de Febrero de 2012

Olvidé un detalle en IE9-10 le hace falta soporte para "Placeholder". Pueden usar esta pequeña librería.
Por v3on el 28 de Febrero de 2012

increíble que solo sea CSS
Por Acreonte el 28 de Febrero de 2012

Esta muy interesante lo malo es que no has explicado casi nada.
Por ejemplo, porque la etiqueta HTML tiene class="no-js" ?
Tambien dices que no usas prefijos propietarios gracias a prefix-free pero no veo que lo estes usando (no lo has llamado en el html).
Estas usando modernizr, donde y para que?
Tambien estas haciendo un 'hot-linking' de una imagen que aparte de que tenga el nombre mas largo del mundo, creo que fuese mejor si la hospedas en tu sitio.
El resto de imagenes, porque tienen URL absoluta? quiza si haces el truco de images.miDominio.com tendria sentido pero como lo has puesto, no entiendo la necesidad.

Por cierto, espero no tomes mis preguntas a mal, es critica constructiva. Vas muy bien, y te felicito que a tu edad ya estes haciendo todo esto. Segui adelante que vas MUY bien!
Por carlosssasd el 28 de Febrero de 2012
Uso boilerplate como plantilla, class=no-js es parte de ella

Código :
```
<html class="no-js" lang="es">
```
Sí veo que me he olvidado de poner Prefix-free en el head, pero así lo tienen que hacer,

Código :
```
<script src="prefixfree.min.js"></script>
```
Todavía no he terminado mi Portfolio, así que para llenar el espacio utilice la imagen de W3C.

Si entras a ver la Demo te darás cuenta que están colocadas correctamente, para el tutorial lo he hecho así por si alguien lo quiere probar tenga acceso a las imágenes más rápido.

Gracias por comentar!.
Por carlosssasd el 28 de Febrero de 2012

Ah me olvidaba modernizr es para que los IE definan a las etiquetas de HTML5 como cajas!
Por ekisdedede el 29 de Febrero de 2012

joder, te felicito por tu gran trabajo y por esos 14 años que tienes y lo que eres capaz de hacer!

yo en cambio, a esa edad empezaba a averiguar lo que era un pc, y a la edad que tengo ahora ya si que lo entiendo todo!!!

enhorabuena, te falta pulir un par de cosas, pero la idea esta buenisima!
Por carlosssasd el 29 de Febrero de 2012

Gracias por comentar sus críticas me sirven demasiado, si trataré de pulir algunos detalles, en serio gracias!
Por CarlosRuminott el 29 de Febrero de 2012

Te quedo muy c00l!!

Y como dicen más arriba te faltó comentar el código que "hace la magia"

Muy bueno el demo.

PD: pff yo a los 14 andaba jugando al Age Of Empire jaja
Por Marcos el 05 de Marzo de 2012

Hola, felicidades por el tutorial. Una cosa, como se podría hacer para que por defecto se muestre abierta la primera ventana? Ahora mismo tu le estas pasando en la url #ac1, pero si entras en el portfolio sin ese parametro se muestran todos cerrados.

gracias
Por Eclypse el 06 de Marzo de 2012

Porfavor no entendi nada explicarlo mejor ... Buen diseño
Por sergix el 18 de Marzo de 2012

Hola
He hecho un site con html5 y css3, y he pueto un formulario de contacto dentro del acordeon. Al hacer clic en "CONTACTO" se abre el acordeon, pero al ingresar datos en el formulario de contacto el acordeon se cierra. Sabes como puedo solucionar esto? Es como que los campos del formulario no soportan el acordeon en html5 y css3. Me pueden dar una solucion.
Saludos
sergix
Por Roger Martínez el 21 de Marzo de 2012

Saludos, me recuerda a una version en sentido contrario que se localiza en http://www.sitepoint.com en la URL www.sitepoint.com/css3-horizontal-accordion-using-target-selector aunque creo que tambien manejan la versión en vertical. Felicidades, a mis 14 años creo que no sabia ni que queria =(
Por Giobanny el 21 de Septiembre de 2012

Hola que tal amigo muy bueno el diseño se te agradece y bueno esperemos que nos sigas compartiendo mas información como esa saludos.....!!!!
Por jubeor el 28 de Noviembre de 2012

A día 28 de Noviembre parece que habéis tenido algún problemilla que hace que la imagen del artículo y el Demo no funcionen. Por lo demás muchas gracias como siempre por vuestros ejemplos
Por Freeki el 18 de Marzo de 2013

che podes subir el demo a otro hosting que te lo volaron?
Por fer el 14 de Febrero de 2014

no se puede ver el demo me parece

Portfolio tipo acordeón con CSS3 y HTML5

Uso de :target

Publica tu comentario

o puedes...