Siempre me han maravillado los menus que se conforman por cajas y, al pasar el mouse sobre ellas, puedes dar click y obtienes un bonito efecto :hover. El problema es que, el 90% de estas cajas son a base de javascript; lo cuál limita mucho nuestra accesibilidad. Hace tiempo que no veo este tipo de menús, por lo que me había olvidado completamente de ellos...
... hasta que, leyendo a The CSS Guy me encuentro con un tutorial que trata precisamente de esto; pero de nuevo, utiliza javascript (aunque es bien usado, y si está desactivado, no se compromete la accesibilidad; pero si el estilo). Me di a la tarea de crear mi propia versión de links en elementos de caja (osease, podrán aplicar esta técnica a cualquier div, li, p, etc.) aunque, de nuevo, no es lo mismo para todos los navegadores. Como siempre, les dejo el demo para que vean de qué trata antes de aventarse todo el tutorial.
(Continuar leyendo)
Últimamente he tenido MUCHÍSIMO trabajo (ahí la falta de tiempo para actualizar el blog :S una disculpa). En uno de los proyectos que tenía me encontré con un problema que de principio no debería estar ahí. Había un listado de características (una lista desordenada en HTML) que se repartía en 3 columnas. Si la lista tenía 3 columnas y 9 elementos, los primeros tres elementos estaban en la primer columna; del 4 al 6 en la segunda columna y del 7 al 9 en la tercera, de este modo:
Muy bonito ¿cierto? Pero codificarlo no es tan sencillo. El problema que tenía es que había diferentes listas con diferentes números de elementos y no quería extender mucho el CSS para manejar x número de listas; necesitaba crear un medio para poder manejar múltiples listas con diferentes números de elementos pero que todas siguieran más o menos el mismo estandar, las mismas clases.
(Continuar leyendo)
Mañana 5 de Abril metal.ize y gran parte de la web (al menos la web que vale la pena ver) se desnudará completamente y mostrará su <body>. Como seguramente saben, el 5 de Abril se celebra el CSS Naked Day, osease, el día que quitamos los vínculos a nuestros CSS de nuestra web y dejamos la pura estructura a la vista. ¿El objetivo? Sencillo, promover los Estándares Web.
(Continuar leyendo)
Cuando estaba codificando el diseño de metal.ize se me ocurrió la idea de hacerlo líquido. Obviamente, esto lo quería lograr sin el uso de tablas y quería que fuera compatible con la mayor cantidad de navegadores posible. Debo decir que fue bastante complicado encontrar un método fiable, fácil y que no requiriera de hacks. Es por eso que quiero compartir con ustedes la técnica que usé.
(Continuar leyendo)
