Columnas adaptables con CSS3: uso del selector :nth-child(n)

El selector :nth-child(n) permite seleccionar el "enésimo" elemento hijo dentro de un elemento padre; donde n puede ser un número, una palabra clave o una fórmula. Este selector es en realidad una pseudo-clase CSS3 compatible con todos los navegadores modernos, excepto con IE8 y anteriores (para variar Laughing).

Por ejemplo, para seleccionar el segundo párrafo de un texto lo hacemos con p:nth-child(2). Si deseamos seleccionar el quinto elemento de una lista usamos li:nth-child(5), si queremos seleccionar todos los elementos impares de una lista usaremos li:nth-child(odd) y para seleccionar, de tres en tres, los elementos de una lista lo hacemos con li:nth-child(3n+0). Una vez seleccionados los elementos deseados podemos modificar sus propiedades con reglas CSS.

Veamos cómo podemos aprovechar las propiedades del selector :nth-child(n) para mostrar contenido a 1, 2, 3 ó 4 columnas adaptables automáticamente al ancho de la pantalla del dispositivo que usemos para navegar.

Leer más »

Crear un acordeón solamente con CSS3 y HTML5 (Parte II: uso de los checkbox)

En el artículo anterior aprendimos cómo aprovechar las propiedades de los botones de opción para Crear un acordeón solamente con CSS3 y HTML5 (Parte I: uso de los radio button).

Las casillas de verificación (en inglés, "checkbox") también son elementos presentes en los formularios web, pero a diferencia de los botones de opción, los "checkbox" nos permiten seleccionar múltiples opciones dentro de un conjunto de opciones predeterminadas.

Y es justamente gracias a esta propiedad que podremos crear un efecto de acordeón solamente con CSS3 y HTML5 sin necesidad de escribir una sola línea de código Javascript (ni jQuery).

Leer más »

Crear un acordeón solamente con CSS3 y HTML5 (Parte I: uso de los radio button)

Sabemos que los botones de opción (en inglés, "radio button") son elementos usados en formularios web que sirven para seleccionar una única opción entre un grupo predeterminado de opciones.

Ya vimos cómo podemos aprovechar las propiedades de los "radio button" para Crear pestañas solamente con CSS3 y HTML5 sin utilizar ningún código Javascript. En esta oportunidad explicaré un método muy fácil y práctico para mostrar información con un efecto de acordeón. Empecemos.

Leer más »

Crear pestañas solamente con CSS3 y HTML5

Ya hemos visto cuán fácil es crear pestañas con HTML5, CSS3 y jQuery. Sin embargo, es perfectamente posible hacerlo sin necesidad de escribir ningún código Javascript ni descargar ningún plugin de jQuery.

Los "botones de opción" (en inglés, "radio buttons") son elementos que se usan frecuentemente dentro de formularios web y permiten elegir una única opción dentro de un conjunto de varias opciones. Veremos cómo podemos aprovechar esta propiedad para crear pestañas (o "tabs") usando solamente reglas CSS3 y etiquetas HTML5.

Leer más »

Crear un botón "Go to the Top" con jQuery, HTML5 y CSS3

Cuando navegamos en una página web el contenido se muestra de arriba hacia abajo y si en algún momento deseamos regresar a la parte superior de la página entonces utilizamos la barra de desplazamiento vertical ubicada en el borde derecho de la ventana del navegador o simplemente giramos la rueda central de nuestro ratón. Sin embargo, hacer esto muchas veces dificulta la navegación o la hace incómoda para el usuario, sobre todo si usa un dispositivo móvil como una tablet/iPad o un smartphone/iPhone.

Una solución muy popular consiste en mostrarle al usuario un botón "Go to the Top" cuya única función es "Desplazarse hacia Arriba" y mostrar el contenido de la parte superior de la página. Veamos cómo podemos hacerlo con jQuery de manera fácil y práctica.

Leer más »