Contexto: día de semana laboral, cliente envía sus observaciones: Después de leer un poco, dí con la solución la que presento a continuación. Básicamente con CSS2 existió una propiedad que permitía que se definiera el modo de impresión a través de estilos:

La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores capaces). Si estás haciendo [animaciones y transformaciones varias utilizando CSS3][1], existe un truco para engañar al browser y forzar a que utilice el GPU para realizar las animaciones. Basta con que declares la siguiente propiedad y valor (si no la estás utilizando):

Hace unas semanas impartí un mini-curso teórico sobre diseño y desarrollo web para dispositivos móviles. El resultado fueron 3 días de slides, charla y demostraciones, las que comparto en esta ocasión para que pueda ser escuchada, analizada y criticada abiertamente.

Sólo quería probar cómo a partir de un elemento-caja, lograba girarlo 45º y rotarlo al mismo tiempo. No sé qué uso práctico pueda tener, pero dejo el código resumido para que lo estudien ya que no fue fácil (todo lo que sean sombras, gradientes lo pueden ver en el source del ejemplo final). El HTML es una imagen común y corriente:

Con [jQuery][1] constantemente necesitamos crear variables para tomar valores CSS de elementos, para luego construir nuevos elementos o interacciones; constantemente lo hago en plugins cono [Timelinr][2] o [Blox][3]!, pero JavaScript nos ofrece un método más rápido que el andar haciendo slices. Desde el siguiente ejemplo, tomaremos la el valor CSS de margin-top del buscador de este mismo sitio; normalmente lo haríamos de esta manera:

Entramos en una era donde cada vez más podemos aprovechar las bondades de CSS3 sin tener que parchar funcionalidad con scripts y plugins de JavaScript. En esta ocasión, utilizaremos una propiedad CSS3 para hacer que una imagen de fondo cubra el 100% de la ventana, escalándose hasta adaptarse. Afortunadamente los browsers están aplicando suavizado a los elementos por defecto, y en general la imagen no debería de verse (muy) pixelada (si está en una resolución decente y bien optimizada, claro).

100 Things Every Designer Needs to Know About People Susan M Weinschenk, Ph.D. Edición 1, ISBN-10: 0321767535 | ISBN-13: 978-0321767530 Antes que todo y primero que nada, este libro fue un préstamo de un amigo quien gentilmente me recomendó leerlo. Sus palabras fueron (creo): “lo compré en Amazon y es interesante”. Suficiente en ese entonces para darle una oportunidad.

#42 – 8 marzo 2012

Este será un artículo corto y preciso: cómo alternar estilos dentro de un mismo elemento utilizando 3 técnicas diferentes. Con el siguiente HTML de ejemplo:

El cursor del mouse es un elemento muy poco considerado en el momento del diseño ó al aplicar estilos CSS. Pero la verdad es que es un complemento importantísimo de la accesibilidad y usabilidad, y por esa razón fue considerado en el momento de crearse tantos valores para esta propiedad. Su uso es muy fácil y es aplicable no sólo a la pseudo-class :hover, sino que a cualquier etiqueta HTML: