Comunidad de diseño web y desarrollo en internet

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate