Pasos para Crear un Acordeón con HTML5 y CSS3
crear un acordeón animado con instrucciones sencillas de CSS3.
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.
práctica tendremos el siguiente resultado:
html:
<title>Crear un
acordeon con CSS3 </title>
<link
type=”text/css” rel=”stylesheet”
href=”estilo.css”>
<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>
#ccc;
*/
contenedor */
de colores */
#fff;
-webkit-gradient(linear, left top, left bottom, from(#fff),
-webkit-linear-gradient(top, #fff, #eee);
-moz-linear-gradient(top, #fff, #eee);
-ms-linear-gradient(top, #fff, #eee);
-o-linear-gradient(top, #fff, #eee);
linear-gradient(top, #fff, #eee);
*/
5px;
‘Trebuchet MS’, ‘Lucida Sans’;
none;
5px;
height 0.3s ease-in-out;
height 0.3s ease-in-out;
0.3s ease-in-out;
0.3s ease-in-out;
a:after {
#333;
solid transparent;
solid transparent;
+ div {