Acordeon/Libro en CSS

¡Hola!
Después de casi un mes de exámenes, y la consiguiente imposibilidad de crear nuevas entradas, he aquí de nuevo jejeje.

Esta vez con una entrada sobre CSS, hace un tiempo que le debía a ‘El penas’ algo parecido a un ‘acordeón’ o un ‘libro’ que sirviera para presentar a los miembros de un grupo, por ejemplo, o cualquier otra cosa que se nos ocurriera.

Bien, la pinta que tiene no es de acordeón en sí, pero se adecúa al propósito para el cual ha sido diseñado 🙂

Así que comencemos:

Para empezar, se puede ver un ejemplo en funcionamiento aquí:

El acordeón consta de dos archivos, un .html y un .css, bien, el html contiene lo siguiente:

	<div id="acordeon">
				<div class="hoja" id="item1">
					<a href="#item1">Titulo 1</a>
					<p> datos 1 </p>
				</div>
				<div class="hoja" id="item2">
					<a href="#item2">Titulo 2</a>
					<p> datos 2 </p>
				</div>
				<div class="hoja" id="item3">
					<a href="#item3">Titulo 3</a>
					<p> datos 3 </p>
				</div>
				<div class="hoja" id="item4">
					<a href="#item4">Titulo 4</a>
					<p> datos 4 </p>
				</div>
	</div>

Como podemos comprobar, tenemos un contenedor para alojar todas las ‘hojas’ que queramos, dentro de ellas, un título y un párrafo con datos.

Sigamos con el css:


#acordeon {
	width: 800px;
	height: auto;
	padding-top: 30px;
	padding-left: 30px;
	padding-bottom: 30px;
}

.hoja {
	margin-left: -45px;
	float: left;
	width: 50px;
	height: 55px;
	background: #777;
	color: black;
	width: 70px; /*al rotar, el alto se convierte en ancho y viceversa*/
	-webkit-transform: rotate(-90deg);  /*transformación de rotación*/
	transform: rotate(-90deg);
	border: 1px solid #FFF;
	-webkit-border-radius: 7px;

	-webkit-transition: 1s;
	transition: 1s;
	padding: 5px;
}

a {
	color: white;
	outline: 0 none;
	text-decoration: none;
	text-shadow: 0.2em 0.2em 0.2em #000;
}

p{
	margin: 4px;
}

.hoja, p {
	-webkit-transition: 1s ;
	transition:  1s ;
}

.hoja:target {
	height: 250px;	
	width: 200px;
	margin-left: 20px;
	-webkit-transform: rotate(0deg);  /*transformación de rotación*/
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 1s;
	transition: 1s;
}

Como podemos comprobar, el código no tiene dificultad 🙂

Quizás sea MUY posible mejorarlo, así que comentad con alguna sugerencia 🙂

Espero que os sirva de ayuda/inspiración

HackSaludos!

Anuncios

Acerca de Darkvidhck

Estudiante de ingeniería informática, haciendo mis pinitos como desarrollador web, programador, gamer y Linuxero. Aficionado a la seguridad. Eterno viciado al conocimiento.
Esta entrada fue publicada en Diseño y desarrollo WEB y etiquetada , , , . Guarda el enlace permanente.

2 respuestas a Acordeon/Libro en CSS

  1. Dion dijo:

    Muchas gracias por tu lección, es el mejor ejemplo de efecto y sencillez de desarrollo que he aprendido. CSS junto a conocimiento tiene recursos inagotables.
    Jquery y js me es muy difícil.
    Veré tus sugerencias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s