CSS

Con el mayor uso de CSS, el diseño en tablas se cae cada vez más en picada. Pero como ya esta comprombado, si lo que se busca es mostrar datos tabulares, lo mejor es hacerlo de la última forma (simpleza y buena estructura son las primeras características que se me ocurren al ver los datos tabulados en tablas).

Hace unos minutos acabo de encontrar CSS Table Gallery, una verdadera inspiración. Si estas diseñando tablas, hallarás bastantes ejemplos muy bien labrados (Colores intercalados por filas, efecto hover, esquinas redondeadas, etc. etc.) con el fichero .CSS listo para descargar.

Visitando el weblog de J Wynia, me encuentro con un pequeño script css para crear los ya conocidos bloques de fecha (CSS date Block los llama) que en su mayoría son utilizados por bitácoras de diseño.

He hecho algunos cambios al código, haciéndolo más pequeño aún, pero igual de funcional por lo menos en Firefox, IE6 y Opera.

La diferencia entre ambos scripts radica en usar el alto de linea (line-height) para el campo día, en vez de los márgenes negativos en día y año, que podrán observar en el artículo de Wynia. Algo realmente sencillo, pero que redunda en un código más simple.

Código HTML

Código CSS

Ahora bien. este es sólo un ejemplo, la idea es hacerlo acorde al diseñó de tu sitio web y esto depende de ti.

Idea Original:  J Wynia: CSS Date Blocks for Blogs

Ayer se ha publicado un buen artículo en Una Lista Aparte (ala), sobre el diseño de listas (que coincidencia no), esta vez, en múltiples columnas.

Paul Novitsk expone seis métodos con los cuales se pueden obtener el mismo diseño, aunque no el mismo resultado.

Aquí resumo lo que ha mi parecer son la esencia de las técnicas.

¿Por qué necesito mostrar una lista en varias columnas?

Envolver una lista en varias columnas puede eximir a nuestros visitantes de la necesidad de leer una lista, varias veces, extensa (es decir, favorecemos su lectura). Una lista de tres o de cuatro columnas puede ocupar el ancho de la página web mientras que la lista de una columna, dependiendo del diseño, puede parecer anémica.

En realidad, hay tantos motivos para envolver las listas cuantos diseñadores Web existan: Definitivamente más que unos pocos.

Ha algún tiempo mostré Como crear un Menú Rollover con CSS y una sola imagen basado en la propiedad background-position de CSS.

Pues hoy, navengando por LdaBlog encuentro un interesante artículo que explica como crear una barra de porcentajes con CSS, mantiendo básicamente el mismo principio (el uso de la propiedad background-position) para conseguir el cambio en el gráfico.

Podría ser interesante que alguien le aplique un javscript para que conforme se cargando la página se vaya actualizando la barra de Porcentaje, logrando un efecto similar al que se logra con flash.

Ver Tutorial: Cómo crear una barra de porcentaje con CSS

Ya comentábamos antes las posibilidades que para el diseño web nos brinda unir PHP y CSS, creando un CSS reutilizable o dinámico.

Hasta ahora casi todos los efectos de gradientes que he visto han sido hechos con imágenes, principalmente por su practicidad y accesibilidad a los distitntos navegadores.

Pero me encuentro con CSS Gradients, un ejemplo de la potencialidad del CSS dinámico. Y aunque a mi parecer, el código que genera es demasiado largo como para utilizarlo, es una aplicación que vale la pena probar.

Ver demo: CSS Gradient
Código fuente: CSS Gradient
Autor: Designdetector.com

Más y más diseñadores Web han dejado el uso de las tablas, para controlar el diseño de su sitio web con CSS. Pues, con las muchas ventajas que esto ofrece como el menor tiempo de transferencia directa, la mejor accesibilidad y un manejo más fácil del sitio ¿Por qué no?

Sin embargo, el CSS también tiene sus dificultades...