css

Framework para CSS: blueprintcss

karmel — Sun, 26 Aug 2007 18:00:04 +0200

Blueprint CSS es un framework que Google nos ofrece (desde su sección de desarrollo) para agilizar el trabajo cuando tratemos con hojas de estilos. Lo interesante de este proyecto no es sólo que ofrezca una base para "resetear" los estilos en todos los navegadores, sino que resuelve con un código limpio el diseño planteado en un modelo de rejilla, por lo que se pueden disponer de una base de hasta 14 columnas. Además, utiliza una técnica que ya pudimos leer en A List Apart hace algún tiempo con la que se consiguen efectos tipográficos estilo periódico.

La única pega es que por ahora sólo está pensado para diseños fijos de tamaños de pantalla de 1024, pero puede ser un soporte útil para algunos proyectos.

ACTUALIZACIÓN:ya ha salido la versión 5 que proporciona, entre otras cosas, una base de 24 columnas de 30 píxeles y separaciones de 10px, todavía más flexible.

Imágenes con CSS

karmel — Wed, 30 May 2007 17:30:29 +0200

Lo vimos hace unos días en Isopixel . Esta imagen, aunque no parezca ninguna maravilla (en principio) está hecha con CSS puro y duro, y si no se lo creen, vayan a la web del autor y miren el código !¡

Alineación vertical para todos lo navegadores

karmel — Thu, 19 Apr 2007 17:11:48 +0200

Nota mental:

Cuando quieras alinear un elemento verticalmente, como por ejemplo una imagen, en una capa de css y no quieras usar tablas porque no consideras el momento ni el lugar tenemos:

#micapita {

width: 200px;

height: 200px;

display:table-cell;

vertical-align:middle;

}

Cuando quieras hacer esto mismo sin que resurjan tus instintos asesinos hacia los creadores de Internet Explorer 6 ó 7 puedes hacer lo mismo pero diferente:

#micapita {

width: 200px;

height: 200px;

display:block;

font-size:200px;

}

O sea, utilizar el mismo tamaño de letra que el de la capa contenedora. Aunque Torres Burriel nos referencia a otro truquillo que al menos yo no he conseguido que funcionara pero que sigue la misma lógica: usar el mismo line-height.