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/

El trabajo como diseñador web tiene desventajas (cambios de tendencia a velocidad de vértigo, diversidad de dispositivos para los que diseñar…), pero también tiene sus cosas buenas. Entre ellas está la posibilidad de realizar tu trabajo desde casa, a través de internet… incluso en zapatillas.

Si te estás planteando empezar a trabajar desde casa, quizá te pueda interesar esta comparativa entre varios sitios web para trabajar como freelance. Hay más, pero sólo hablaré de las que he probado.

Seguir leyendo

Ubuntu, una de las distribuciones de Linux más populares, lanza una nueva versión cada 6 meses. Unos meses antes de cada lanzamiento, se organiza un concurso para elegir los fondos de pantalla que vendrán instalados por defecto en el sistema operativo. En esta ocasión participo con la colaboración de mi hermana, Paula Morales.

EDICIÓN 20-03-2013: ¡Hemos ganado! Nuestro diseño ha sido escogido, entre las más de 700 propuestas, para ser uno de los fondos de pantalla por defecto. Vendrá incluido en Ubuntu 13.04 pero, si no podéis esperar, podéis descargar el set de fondos desde estos otros enlaces:
http://www.omgubuntu.co.uk/2013/03/ubuntu-13-04-winning-wallpapers-announced
http://hungfu.wordpress.com/2013/03/19/13-04-wallpapers-submitted/

Seguir leyendo

A estas alturas, prácticamente todo el mundo ha oído ya hablar de HTML5: una serie de atractivas novedades en el mundo del diseño web que posibilitan la creación de aplicaciones (de navegador, móviles y hasta de escritorio) más potentes.

Al acercarse al lenguaje por primera vez, ya sea desde cero o desde HTML4, es habitual cometer ciertos errores. Espero que esta lista te ayude a no cometerlos tú tampoco (yo caí en varios de ellos, no hay por qué avergonzarse 😀 ).

Durante el resto del artículo me referiré a HTML5 con la acepción (bastante extendida) que engloba tanto HTML como CSS y JavaScript.

Seguir leyendo