Hace unas semanas, mientras trabajaba en el diseño de Biblioteca Comunidad Joomla, me vi en la necesidad de agregar unos ribbons (o cintas, en español) para los títulos de los libros. No quería hacerlo con imágenes, sino con CSS, ya que es posible y no es tan complicado.

Así que tomando el modelo de 3D Ribbon Generator decidí crear una extensión para Compass que permite crearlos de manera sencilla:

Ejemplo finalizado.

Los ribbons son compatibles con IE7+, Firefox 3.5+, Google Chrome y Safari / Safari iOS. Incluso la extensión ofrece soporte para CSS3 Pie, que permite agregar bordes redondeados y sombras en IE.

La utilización es bastante sencilla y flexible, toda la documentación e instalación se encuentran en el repositorio de GitHub.

Y si aún no utilizaron Compass, ¿Qué esperan? ;)

In defense of CSS hacks — introducing “safe CSS hacks” es uno de los artículos (incluyendo comentarios) más interesantes que leí en las últimas semanas:

Básicamente es un repaso por los diferentes métodos para establecer estilos para Internet Explorer, analizando pros y contras (por ejemplo, nunca había notado este problema que sucede al añadir comentarios condicionales en el HTML y sus posibles soluciones).

Al final del artículo se expone una posible solución que combina tanto los comentarios condicionales como los CSS hacks (aunque realmente no me termina de convencer el método…)

En fin, una lectura muy recomendable.

Desde hace unos días esta disponible una nueva versión de Sass con varias novedades interesantes (lectura recomendada: Haml and Sass 3.1 are Released).

Pero lo mejor es que también tenemos una nueva versión (y sitio) de Compass. Esta versión incorpora:

• La posibilidad de crear sprites de imágenes desde el mismo .scss (antes también se podía, utilizando Limonade, el cual ahora forma parte del núcleo de Compass);
• Congruencia de estilos: Ahora, los mixins CSS3 tratan de coincidir con la sintaxis estipulada CSS3, de forma que no tengamos que aprender cosas nuevas al utilizar Compass;
• Nuevo módulo para utilizar Vertical Rhythm;
• Actualización de BluePrint a la versión 1.0.

¿Todavía no usas Sass y Compass? Hace unos meses realice tres screencast con los conceptos básicos de las herramientas.