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/

EDICIÓN 15-03-2013: Este problema sólo se da en Firefox. Los demás navegadores tienen alguna forma de evitar este problema de privacidad, o bien no les preocupa tanto como a Mozilla.

Las transiciones son uno de los efectos más llamativos que nos ofrece CSS3. Una multitud de propiedades puede animarse, creando interesantes efectos. Entre dichas propiedades se encuentra el color del texto e, inclusive, el de los enlaces. Sin embargo, los enlaces visitados plantean un problema de difícil solución.

Seguir leyendo

Crear degradados sin usar imágenes, simplemente con CSS, es una de las posibilidades más útiles de CSS3. Podemos crear fondos sin necesidad de usar un editor de imágenes, con la facilidad de editarlos únicamente abriendo un editor de texto.

Muchísimos diseñadores -entre los que me incluyo- ya estaban usando estos degradados, pese a que la especificación del W3C aún no era definitiva. Un alto porcentaje de CSS3 está en esa situación y se emplean mientras tanto versiones “provisionales” precedidas de un prefijo de navegador. Al final de estas versiones se pone la versión sin prefijo para que, cuando la especificación sea definitiva, sobreescriba las provisionales. Sin embargo, ha habido algunos cambios en dicha sintaxis y toca revisar si nos puede afectar.

Seguir leyendo

El nuevo estándar HTML5 ofrece multitud de nuevas posibilidades para el desarrollo de webs (y aplicaciones): nuevas etiquetas, soporte nativo para video/audio, animaciones, etc.

Cuando se habla de estas nuevas características, lo habitual es hablar de geolocalización, almacenamiento local, canvas… (Curiosamente, la mayoría de estas características no son propiamente HTML si no más bien JavaScript, pero esto es otro tema :P)

Sin embargo, una de las novedades que a mí me parecen más interesantes es otra: la posibilidad de usar una jerarquía de etiquetas de encabezado (H1, H2, H3…) en cada sección (y, por tanto, repetir H1).

Seguir leyendo