CSS

IzzyMenu es una herramienta online gratuita a lo 2.0, con una impresionante interfaz en ajax que nos permite crear menús de aspecto profesional rápida y fácilmente.

Con IzziMenu puedes seleccionar bastantes opciones que te permitan crear un menú totalmente personalizado, ya sea un menú vertical u horizontal, el tipo de fuente tipográfica, el ancho, alto, el background (color o imagen), el borde, padding y márgenes. También puedes añadir enlaces y efectos (rollover) al menú sin necesidad de conocer HTML ni CSS.

Además, si ya tenemos conocimientos en programación, la herramienta es útil porque nos permite escoger entre muchísimos menús prediseñados, muy bueno si estamos faltos de inspiración, ya que sólo bastará un rediseño o personalización a los elementos que hagan falta, para tener nuestro menú con diseño profesional terminado.

Si quieren conocer más de la aplicación, pues pasen a probarlo que es gratuita.

Enlace | IzzyMenu

CSSplay ha renovado su flota de menús horizontales CSS. Todos son estilo rollover sobre texto, lo que facilita su personalización. Los menús funcionan bien en todos los navegadores. Y están libres de poder ser usados tanto en proyectos personales como comerciales.

Enlace | Demos y Descargas
Vía | webappers

Una buena idea para ahorrar ancho de banda, es optimizar y comprimir los archivos CSS. Existe uno, entre varios, sacado del maletín de herramientas, antiguo (de años) pero muy vigente, hecho por CSS Drive, que nos permite reducir el tamaño de los archivos CSS considerablemente. Aunque todo depende, de cuan legible deseemos que quede la hoja de estilos.

La herramienta de CSS Drive nos da algunas opciones como borrar comentarios u otras más características si elegimos la vista avanzada. Pero, si lo dejamos en modo de compresión normal, ya estamos eligiendo una buena combinación entre compresión y legibilidad. (Tip: Guarda una copia del CSS original).

Enlace | CSS Drive Compressor

Espectacular la técnica que nos explica Roger Johansson para convertir un enlace de texto en un botón con sólo CSS y algunas etiquetas extras.

El diseño del botón web tiene las siguientes características:

• Un ancho flexible a la cantidad de texto
• Crecimiento horizontal y vertical según el tamaño del texto
• Conserva su apariencia dentro de los límites razonables
• No tiene zonas no clickeables
• Pueden tener esquinas redondeadas
• Son legibles, aún cuando las imágenes no se muestren

El acabado final lo pueden observar en este enlace. Y el código e imágenes necesarios para lograrlo, desde el siguiente.

Tutorial | Creating bulletproof graphic link buttons with CSS

Para que matarse retocando las imágenes, añadiéndoles efectos, sombras, bordes, y esquinas redondeadas con el Photoshop, si un fichero javascript y algo de CSS pueden hacer todo el trabajo por nosotros. Corner.js es una pequeña librería javascript sumamente fácil de incorporar a cualquier sitio web.

Para utilizarla hay que seguir los siguientes pasos:

1. Descargar la librería y subirla al servidor
2. Añadir el siguiente código dentro del html de la web:
   <script type="text/javascript" src="corner.js"></script>
3. En las imagines que querramos se muestren con esquinas redondeadas, basta añadirles lo siguiente: class="corner"

Asimismo, hay varios efectos, que pueden combinarse entre si.

Enlace | corner.js
Vía | ajaxian

Un código fácil de personalizar, sólo CSS y XHTML válido, probado en los principales navegadores (Internet Explorer 6 y 7, Firefox 2.0, Safari 2.0 y Opera 9.0), que nos permite diseñar los comentarios como burbujas. Y, si queremos utilizar esquinas redondeadas, viene integrado con curvy corners.

Enlace | CSS Speech Bubbles