DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
11-08-2014

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:

Resultado Final


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Atomo con CSS

Atomo con CSS

Loader espiral con CSS

Loader espiral con CSS

Sistema sola con CSS

Sistema sola con CSS

Algunos artículos que te pueden interesar

Animando cosas con CSS: creando loaders

Animando cosas con CSS: creando loaders

Los loaders son un recurso de los más vistosos y necesarios en cualquier aplicación al momento de realizar una tarea que requiera tiempo; en esta entrada veremos cómo crear un par de loaders.

Andrés Cruz 20-10-2015

¿Cómo hacer un sistema de grid (rejillas) responsivo casero en CSS?

¿Cómo hacer un sistema de grid (rejillas) responsivo casero en CSS?

Existen una gran cantidad de frameworks CSS que podrás encontrar el Google que permiten crear rejillas o grid; en esta entrada veremos como crear un sencillo sistema de rejillas con CSS.

Andrés Cruz 06-04-2015

La pseudo-class :checked en CSS

La pseudo-class :checked en CSS

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio, checkbox u option.

Andrés Cruz 26-01-2015