Área de contenido con efecto acordeón con CSS3
En muchas ocasiones he comentado sobre una manera muy atractiva de presentar información en una página web mediante la típica estructura tipo acordeón, que se puede emplear en menús o en zonas de contenido, es muy fácil de diseñar, la mayuría de los que he comentado se pueden construir solamente con CSS. Este tipo de contenedor tipo acordeón es muy agradable y últimamente se ve mucho.
Aunque esta estructura no es algo nuevo, pero aún así, en mi opinión, es bastante fresca. Un efecto acordeón de progresión agradable, es de lo más semántico ya que solo usamos HTML, CSS y algo de CSS3.
Hay muchos plugins jQuery que puede hacer este trabajo, pero ¿qué sucede si el visitante tiene Javascript desactivado?, entonces el acordeón no funcionará correctamente. Si tu acordeón es puramente en CSS entonces lo podrán ver todos tus visitantes.
El diseño de una estructura tipo acordeón puede ser muy útil cuando se desea organizar perfectamente el contenido, o para colocar mucho contenido en poco espacio, pues va apareciendo una información y desaparece otra.
Los de tympanus.net/codrops, nos muestran un tutorial que nos ayuda a crear una estructura vertical tipo acordeón con una sencilla animación para presentar diversos tipos de información en las áreas de contenido en apertura y cierre, para ello nos dejan toda la codificación que necesitamos, que encontramos en el artículo Accordion with CSS3. Aquí tienes el enlace a la a la vista previa, con tres variantes diferentes, por eso de que una imagen vale más que mil palabras. Tenga en cuenta que el resultado de este tutorial sólo funcionará según lo previsto en los navegadores que soportan las propiedades de CSS3 en uso.
El artículo te deja todo tipo de consejos y sugerencias y por supuesto toda la codificación, para que puedas configurarlo y personalizarlo a tu gusto. Podemos experimentar un poco más esta estructura para crear un acordeón que animará las áreas de contenido en apertura y cierre. Mediante el uso de casillas ocultas, se puede controlar la apertura y cierre. Alternativamente, también puedes utilizar los botones de radio, si sólo deseas que aparezca una sección abierta a la vez.
Un poco más abajo puedes ver una ilustración del invento para que te hagas una idea de en que consiste esta área de contenido tipo acordeón basados en CSS.
Escrito por Toni Comparte este artículo: Estas son las categorías a las que pertenece el artículo Área de contenido con efecto acordeón con CSS3:
Programas Relacionados
No hay comentarios en este artículo.
|
Inscríbete al Boletín
|
Cosassencillas.com
Diseño, plantillas, fondos de escritorio, complementos firefox y mucho más. - Contactar
Quizá también te interese aprender más sobre: Herramientas web
Insertar un Comentario
Comentarios
Artículos relacionados con Desarrollo web, Menús, CSS