You are here
Noticias 

Pasos para Crear un Acordeón con HTML5 y CSS3

BlogUneWeb
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!

Related posts