Como mostrar contenido en filas expandibles con solo CSS

11-08-2014 - Andrés Cruz

Como mostrar contenido en filas expandibles con solo CSS

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

En una entrega pasada mostramos como mostrar contenido en columnas expandibles con solo CSS; vimos cómo mostrar contenido adaptable mediante columnas expandibles; en esta nueva entrega, veremos una variable de este ejercicio anterior, el cual consiste en mostrar contenido por filas en vez de columnas; sin embargo mantendremos el mismo principio.

Recordando un poco el propósito de estos ejercicios, es el de poder mostrar contenido, de manera atractiva y sencilla sin muchas complicaciones (como vimos en el artículo anterior y como veremos también en este, el HTML y CSS es realmente sencillo); el funcionamiento sigue siendo sencillo; al posicionar el cursor encima de alguna fila, se expandirá y mostrará el contenido oculto por defecto.

Definiendo el HTML

Las filas serán un total de cuatro; pero por supuesto, pueden ser más o menos, depende de las necesidades; para ello utilizaremos los divs:

        <div>
                <p>Android</p>
                <img src="android.png"/>
        </div>
     	<div>
                <p>Windows Phone 8</p>
                <img src="windows-8-phone.png"/>
        </div>
     	<div>
                <p>IOS</p>
                <img src="ios.png"/>
        </div>
     	<div>
                <p>BlackBerry</p>
                <img src="blackberry.png"/>
        </div>

Definiendo el CSS

Nuevamente el CSS es corto y muy sencillo de entender; veamos ciertas secciones claves:

Definiendo las filas

            body {
    color: rgba(255, 255, 255, 0); /*invisible*/
                margin: 0;
                background: #f25648;
            }
            div img{
                opacity:0;
                width:8%;
                height:auto;
                display: block;
                margin: 1% auto;
                transition:opacity 1s; 
            }
            div:hover img{
                opacity:1;
            }
            div {
                transition:height 1s,color 1s; 
            }
            div:hover{
                height:40%;
                color:rgba(255, 255, 255, 1);
            }
            div:nth-child(1) {
                background: #aaAA33;
            }
            div:nth-child(2) {
                background: #22AAff;
            }
            div:nth-child(3) {
                background: #EEEEEE;
            }
            div:nth-child(4) {
                background: #111111;
            }
            div:hover {
                color: rgba(255, 255, 255, 1);
            }

Puntos claves:

  • El HTML anterior esta compuesto de un nombre y de una imagen; que corresponden al contenido que se desea mostrar.
  • Definir un color para cada fila.
  • Definir todas las filas representados por los divs para que en conjunto ocupen un 80% alto (height) de la pantalla y siempre el 100% de ancho (width); de esta forma al ampliarlos ocupen el 20% restante.
  • Definir un color de fondo en el body para el 20% restante del documento (que no es ocupado por ningún div); de esta forma parecerá un componente más de las filas pero este no mostrará ningún contenido ni efecto, el porqué de esto se debe a que este espacio será ocupado el div al momento de su expansión.
  • La transición nos permiten que un elemento cambia gradualmente (en un tiempo determinado) de un estilo a otro recordando; artículo pasado Introducción a las Transiciones en CSS; con el código HTML y CSS anterior obtenemos el siguiente resultado:

Resultado Final


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!