Por fin, tras mucho trabajo en mis ratos libres, tengo listo mi tema de WordPress, Electric Theme, para descargar. Es parecido al que tengo ahora mismo, pero con muchas mejoras. Pronto lo cambiaré aquí, pero puedes ver cómo se vería en esta demo que he creado.

El tema se llama Electric porque está inspirado en el diseño de los coches eléctricos: formas suaves y colores blancos, azules y verdes.

Interior de coche eléctrico

Electric Theme está preparado para ser usado como tema padre (puedes ver mi post sóbre cómo usar temas hijo si tienes dudas), es responsive y está creado con HTML5 y CSS3. También tiene un panel de opciones para personalizar la plantilla a tu gusto.

El código CSS está generado con SASS, por lo que es muy fácil cambiarlo por completo si conoces cómo funciona este lenguaje (en este otro post tienes otra pequeña introducción a SASS). Si no sabes/quieres, puedes editar el CSS como siempre.

Como puedes ver en la demo, el tema incluye varios widgets específicos, así como un tipo de post personalizado (portafolio) para mostrar tus trabajos. Todas estas características son opcionales, vienen como plugins (incluidos en la propia descarga y fáciles de instalar) que sólo tienes que usar si los necesitas.

Por último, tanto la plantilla como los plugins son fácilmente traducibles (por eso la demo está en inglés). La traducción al español viene incluida.

Las ilustraciones y fotografías de la demo son cortesía del gran Daniel Rivera, Danolas, que me las ha cedido amablemente para usar como ejemplo. Os recomiendo visitar su Behance o DeviantArt

Puedes descargar el tema y usarlo de forma gratuita, ni siquiera tienes que dejar el enlace del footer si no quieres. Eso sí, si lo dejas te estaré agradecido 🙂 … y si me aportas una pequeña donación (la que quieras, aunque sea 1 céntimo), más agradecido aún 😛 ¡Han sido muchas horas de trabajo!

Donar por PayPal. La forma rápida y segura de pagar en Internet.

Descarga

Puedes descargarlo mediante este zip:

O desde el repositorio que he creado en GitHub:

https://github.com/cmoralesweb/electric-theme

¡Espero que os guste! ¡Deja un enlace si usas mi tema en tu web, me gustaría verla! 🙂

Versiones anteriores:

1.0:

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 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

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