lunes, 6 de junio de 2011

Vagabundia

Vagabundia


Ejemplos de acordeones con CSS

Posted: 05 Jun 2011 08:00 PM PDT

Esos son dos ejemplos de acordeones creados sólo cón CSS que funcionan de manera normal en cualquier navegador pero que están preparados para soportar las animaciones que en este momento, sólo funcionan correctamente en Chrome, Opera y en Firefox 4.

El ejemplo de acordeón horizontal es el que mejor se adapta a cualquier stuación y puede utilizarse tanto con anchos fijos como con porcentajes; acá, a diferencia del original, usaré el primer método donde el HTML es una lista ordenada:
<ul class="accordion">   <li class="slide-01">     <div>       <h2>Pestaña 1</h2>       ....... el contenido .......     </div>   </li>   <li class="slide-02">     <div>       <h2>Pestaña 2</h2>       ....... el contenido .......     </div>   </li>   <li class="slide-03">     <div>       <h2>Pestaña 2</h2>       ....... el contenido .......     </div>   </li> </ul>
Y el CSS sería algo así:
.accordion { /* el contenedor */   list-style: none;   overflow: hidden;   margin: 0;   width: 620px;   -moz-border-radius: 10px;   -webkit-border-radius: 10px;   -o-border-radius: 10px;   border-radius: 10px; } .accordion h2 { /* el título */   color: #DEF;   font-family: Helvetica;   font-size: 20px;   margin: 0 0 0.5em;   text-align: center; } .accordion li { /* cada item de la lista */   float: left;   overflow: hidden;   height: 210px; /* la altura máxima que le daremos */   width: 200px; /* el ancho por defecto */   /* las propeidades de animación */   -moz-transition: all 0.2s ease-out;   -webkit-transition: all 0.2s ease-out;   -o-transition: all 0.2s ease-out;   transition: all 0.2s ease-out;   -moz-transition-delay: 0.15s;   -webkit-transition-delay: 0.15s;   -o-transition-delay: 0.15s;   transition-delay: 0.15s; } .accordion li:first-of-type { /* bordes redondeados de la primera pestaña */   -moz-border-radius: 10px 0 0 10px;   -webkit-border-radius: 10px 0 0 10px;   -o-border-radius: 10px 0 0 10px;   border-radius: 10px 0 0 10px; } .accordion li:last-of-type{ /* bordes redondeados de la última pestaña */   -moz-border-radius: 0 10px 10px 0;   -webkit-border-radius: 0 10px 10px 0;   -o-border-radius: 0 10px 10px 0;   border-radius: 0 10px 10px 0; } .accordion div { /* el contenido */   padding: 10px; } .accordion:hover li {    /* al colocar el cursor encima de cualquiera se reduce el ancho de todas */   width: 100px; } .accordion li:hover {    /* y aumenta el ancho de la que estamos seleccionando */   width: 400px; } /* los colores de cada pestañ */ .slide-01 {background:#404951; color:#FFF;} .slide-02 {background:#606971; color:#FFF;} .slide-03 {background:#808991; color:#FFF;}

  • Pestaña 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.
  • Pestaña 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.
  • Pestaña 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

El vertical es un poco menos flexible porque para que funcione bien, requiere que la altura sea calculada; una variante de eso sería algo así:
#vertical {  /* el contenedor */   height: auto;   width: 600px; } #vertical li { /* cada item de la lista */   height: 45px;   width: 100%;   /* las propeidades de animación */   -moz-transition: all 0.2s ease-out;   -webkit-transition: all 0.2s ease-out;   -o-transition: all 0.2s ease-out;   transition: all 0.2s ease-out;   -moz-transition-delay: 0.15s;   -webkit-transition-delay: 0.15s;   -o-transition-delay: 0.15s;   transition-delay: 0.15s; } #vertical li:first-of-type { /* bordes redondeados de la primera pestaña */   -moz-border-radius: 10px 10px 0 0;   -webkit-border-radius: 10px 10px 0 0;   -o-border-radius: 10px 10px 0 0;   border-radius: 10px 10px 0 0; } #vertical li:last-of-type { /* bordes redondeados de la última pestaña */   -moz-border-radius: 0 0 10px 10px;   -webkit-border-radius: 0 0 10px 10px;   -o-border-radius: 0 0 10px 10px;   border-radius: 0 0 10px 10px; } #vertical:hover li {    /* al colocar el cursor encima de cualquiera se reduce el alto de todas */   height: 45px;   overflow: hidden;   width: 100%; } #vertical li:hover {    /* y aumenta la altura de la que estamos seleccionando */   height: auto;   width: 100%; }
Para usarlo de este modo, basta agregar el ID a la etiqueta UL:
<ul class="accordion" id="vertical">

  • Pestaña 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.
  • Pestaña 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.
  • Pestaña 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

REFERENCIAS:csswizardry.com

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog