miércoles, 13 de enero de 2016

Pasos para Crear un Acordeón con HTML5 y CSS3

Crear un Acordeón con CSS3 En esta práctica aprenderás cómo crear un acordeón animado con instrucciones sencillas de CSS3. 

Pero primero que todo, ¿qué es un acordeón en el mundo de la web? En términos simples, y al igual que en la vida real, es un elemento organizador que permite empaquetar muchos contenidos en un espacio reducido. 

De esta forma, al finalizar esta práctica tendremos el siguiente resultado:


Para lograr este resultado debemos hacer el siguiente código html:

<!DOCTYPE html> <html>
<head>
 <title>Crear un acordeon con CSS3 </title>
 <link type="text/css" rel="stylesheet" href="estilo.css">
</head>
<body>
 <div class="accordion">
 <section id="one">
 <h2><a href="#one">Heading 1</a></h2>
 <div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.</p>
 </div>
 </section>
 <section id="two">
 <h2><a href="#two">Heading 2</a></h2>
 <div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim d minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
 </section>
 <section id="three"> <h2><a href="#three">Heading 3</a></h2>
 <div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
 </div>
 </section>
 <section id="four"> <h2><a href="#four">Heading 4</a></h2>
 <div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. </p>
 </div>
 </section>
 <section id="five"> <h2><a href="#five">Heading 5</a></h2>
 <div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. </p>
 </div>
 </section>
 </div>
</body>
</html>


Luego debemos crear un archivo css llamado estilo y darle la apariencia deseada de acordeón de la siguiente manera:


Estilo.css

#contenedor {
 width: 100%;
 height: 300px;
 border
-spacing: 5px;
 background
-color: blue;
}#contenidos {
 display: block;
 background
-color: pink;
}
#principal, #secundario, #lateral {
 display: block; }
#principal {
background
-color: red;
 width: 60%;
 float: right; }
#secundario, #lateral {
 width: 20%; }
body {
 padding: 0;
 margin: 0;
}
section {
 display: block;
}
.accordion {
 background
-color: #eee;
 border: 1px solid #ccc;
 width: 600px;
 padding: 10px;
 margin: 50px auto;
 /* Bordes redondeados */

-moz
-border
-radius: 3px;

-webkit
-border
-radius: 3px;
 border
-radius: 3px;
 /* Sombra del contenedor */

-moz
-box
-shadow: 0 1px 0 #999;

-webkit
-box
-shadow: 0 1px 0 #999;
box-shadow: 0 1px 0 #999;
}
.accordion section
{ border-bottom: 1px solid #ccc;
 margin: 5px;
 /* Fondo en degradado de colores */
 background-color: #fff;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff),
to(#eee));
 background-image: -webkit-linear-gradient(top, #fff, #eee);
 background-image: -moz-linear-gradient(top, #fff, #eee);
 background-image: -ms-linear-gradient(top, #fff, #eee);
 background-image: -o-linear-gradient(top, #fff, #eee);
 background-image: linear-gradient(top, #fff, #eee);
 /* Bordes redondeados */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
.accordion h2, .accordion p {
 margin: 0;
 }
 .accordion p {
 padding: 10px;
 }
 .accordion h2 a {
 display: block;
 position: relative;
 font: 14px/1 'Trebuchet MS', 'Lucida Sans';
 padding: 10px;
 color: #333;
 text-decoration: none;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
.accordion h2 a:hover {
 background: #fff;
 }
.accordion h2 + div {
 height: 0;
 overflow: hidden;
 /* Transiciones */
 -moz-transition: height 0.3s ease-in-out;
 -webkit-transition: height 0.3s ease-in-out;
 -o-transition: height 0.3s ease-in-out;
 transition: height 0.3s ease-in-out;
}
 .accordion :target h2 a:after {
 content: '';
 position: absolute;
 right: 10px;
 top: 50%;
 margin-top: -3px;
 border-top: 5px solid #333;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 }
 .accordion :target h2 + div {
 height: 100px;

 }

Conclusión

Esto es un ejemplo de las maravillas que tiene HTML5, que junto a CSS3 se pueden lograr sin mayores dificultades y las podemos emplear para enriquecer nuestro sitio web haciéndolo llamativo a los clientes y usuarios.
¡Recuerda! Si quieres aprender más, puedes obtener uno de nuestros Diplomados On-Line o Presenciales visita: http://www.uneweb.edu.ve/  ¡Éxitos!

Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Entradas populares