You are here
Crear un Acordeón con CSS3 Sin categoría 

Crear un Acordeón con 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:

 

 

Crear un Acordeón con CSS3
Crear un Acordeón con CSS3

 

 

 

 

 

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 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=”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;

}

Related posts

Comments

Leave a Comment


*