Entre las nuevas opciones que nos ofrece HTML5 (esta vez, en el sentido más amplio del término, JavaScript incluido) se encuentra la API de visibilidad de página: un pequeño conjunto de propiedades y eventos que nos facilitan el saber si el visitante de nuestra web tiene ésta en primer plano o está viendo otra pestaña.

He preparado dos sencillos ejemplos para ver cómo funciona esta API:

NOTA: El segundo ejemplo no funciona correctamente en Chrome (pausa pero no reanuda luego la reproducción). En Firefox, Opera e IE10 sí funciona y, ya que esto era un simple ejemplo, no he dedicado más tiempo a buscar la causa exacta (lo siento 😛 ).

Veamos cómo llevarlos a cabo:

Seguir leyendo

El siempre genial David Walsh publicaba el otro día un pequeño artículo sobre fondos animados con CSS3. En los comentarios, alguien sugería mejorarlo añadiendo un efecto parallax, así que me he animado a hacerlo.

¿Qué vamos a conseguir? Una bucólica escena campestre, en la que las nubes pasan mientras el Sol sale y se pone. Todo esto con sólo un div y un span. Las nubes podrían haber sido generadas también con CSS, pero me parecía demasiado lío y opté en su lugar por usar 3 imágenes. Podéis ver el resultado en estas páginas de demo:

La versión sin prefijos funciona (actualmente, según caniuse.com) en Firefox e IE10. En Chrome es necesaria la versión con prefijos.

Por comodidad, durante el resto del tutorial pondré el código SIN prefijos. En ambas demos el código CSS está en la cabecera del propio archivo, por lo que puedes copiar el código que necesites simplemente dándole a ver código fuente.

Veamos cómo se consigue este efecto.

Seguir leyendo

Entre las nuevas funciones de CSS3 siempre se llevan la atención las animaciones o las transiciones y, a veces, ciertas opciones pasan desapercibidas. Es el caso del pseudoselector :target, simple pero muy útil en ciertos casos.

¿Para qué sirve target?

Puedes verlo en acción en esta demo.

Target es un pseudoselector, por lo que es “de la familia” de :hover, :focus o :selected, que se aplican a un elemento sólo en un determinado contexto. En el caso de :target, sus estilos dependen de que el hash de la URL (lo que va después de la almohadilla #) coincida con el ID del elemento al que se aplica el pseudoselector.

Si tenemos este código HTML:

<section id="section1">
            <h1>Esta es la primera sección</h1>
        </section>

Y hacemos que la URL de la página sea http://ejemplo.com/#section1 (ya sea escribiéndola nosotros o pulsando un enlace), podremos aplicar target:

section:target {
        background: yellow;
    }

Aplicaciones prácticas

Probablemente no uses este selector con mucha frecuencia pero, en ciertas ocasiones, puede ser muy útil. Por ejemplo, en páginas de FAQ o similares, donde se suele enlazar a diferentes puntos de la propia página, se puede resaltar de forma más clara la parte exacta en la que se tiene que fijar el usuario.

En mi ejemplo uso una pequeña animación (no funciona en IE<10):

@-webkit-keyframes blink {
        from { background: #DDD031; }
        to { background: transparent; }
    }
    @-o-keyframes blink {
        from { background: #DDD031; }
        to { background: transparent; }
    }
    @-moz-keyframes blink {
        from { background: #DDD031; }
        to { background: transparent; }
    }
    @keyframes blink {
        from { background: #DDD031; }
        to { background: transparent; }
    }
    section:target {
        -webkit-animation: blink 4s 1;
        -o-animation: blink 4s 1;
        animation: blink 4s 1;
    }

Una forma muy fácil de mejorar la experiencia de usuario.

En diseños de página única, también puede ser muy útil. Con un poco de creatividad, hasta se puede crear una galería de fotos: http://thewebrocks.com/demos/targetgallery/

A la hora de crear una web usando WordPress, una de las primeras cosas que buscas es personalizarla y, para ello, buscas un tema (plantilla) que te guste. ¿Y qué pasa si quieres personalizar aún más dicho tema? Para ello WordPress nos ofrece los child themes (“temas hijo”) una forma segura de realizar cambios en las plantillas sin que éstos sean borrados por actualizaciones.

Mis primeros contactos con los temas (plantillas) de WordPress fueron a través de Build Your Own Wicked WordPress Themes, un manual de SitePoint. Gracias a esto, descubrí las bondades de los Child Themes (temas hijo), una característica de WordPress muy útil pero no siempre conocida. Veamos el origen del problema y cómo los child themes lo solucionan.

Seguir leyendo

Hace unas semanas necesitaba crear un modo cine (oscurecer toda la pantalla salvo un elemento -típicamente un vídeo-) para un proyecto que me encargaron. Buscando un poco, descubrí que era mucho más fácil de lo que pensaba: sólo hacen falta un par de líneas de HTML, CSS y JavaScript.

Efecto a conseguir

Púlsame para activar el modo cine

Nota: ¡Me encanta ese perro! 😀

Seguir leyendo