DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-07-2014

Cuando desarrollamos una página web con el propósito de mostrar cierto contenido clave o información nos vemos en la obligación de mostrarla en una forma sencilla, elegante y sin muchas complicaciones; en este artículo veremos una de estas formas, la cual consiste en mostrar el contenido en columnas, que al posicionarnos sobre ellas se expanden y nos muestra el contenido:

Definiendo el HTML

Nuestras columnas serán un total de cuatro; pero por supuesto, pueden ser más o menos, depende de las necesidades; para ello utilizaremos una lista ul:

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

Definiendo el CSS

El CSS es realmente corto y sencillo; veremos ciertas secciones claves:

Definiendo las columnas verticales

            body {
                background: #f25648;
            }
            li img{
                opacity:0;
                transition:opacity 1s; 
            }
            li:hover img{
                opacity:1;
            }
            li {
                margin: 0;
                padding: 0;
                list-style: none;
                width:20%;
                height:100%;
                transition:width 1s,color 1s; 
            }
            ul {
                margin: 0;
                padding: 0;
                height:100%;
            }
            li:hover{
                width:40%;
                color:rgba(255, 255, 255, 1);
            }
            li:nth-child(1) {
                background: #aaAA33;
            }

            li:nth-child(2) {
                background: #22AAff;
            }

            li:nth-child(3) {
                background: #EEEEEE;
            }

            li:nth-child(4) {
                background: #111111;
            }
            li:hover {
                color: rgba(255, 255, 255, 1);
            }

Puntos claves:

Resultado Final


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Hover over the cards

Hover over the cards

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Algunos artículos que te pueden interesar

Seleccionar rangos de elementos con CSS

Seleccionar rangos de elementos con CSS

A veces puede hacerse necesario seleccionar un rango de datos mostrados y es de casi obligatorio demarcar esta región seleccionada lo cual puede hacerse con CSS.

Andrés Cruz 27-07-2015

4+1 selectores CSS esenciales al momento de programar

4+1 selectores CSS esenciales al momento de programar

En esta entrada les mostraré los principales selectores empleados por mi persona; con los selectores podemos ahorrar mucho trabajo y evitar así "inventar" nombres a través de clases o identificadores para referenciar o seleccionar elementos.

Andrés Cruz 26-03-2015

Guía rápida sobre los bordes en CSS

Guía rápida sobre los bordes en CSS

Con esta propiedad es posible definir el color, tamaño y estilo del cada uno de los 4 bordes que definen la caja de un elemento

Andrés Cruz 17-02-2014