CSS

Cómo definir el tamaño de fuente (font-size) con CSS

Este es un tip para trabajar con fuentes ems sin ningún problema. Recuerden que la ventaja de trabajar con ems, en lugar de pixeles, es la flexibilidad que tiene, permitiendo a los lectores poder incrementar o reducir el tamaño del texto a su gusto y antojo.

Para poder definir el tamaño de las fuentes con CSS de una manera coherente, debemos primero igualar 1em a 10px para toda la página.

body {
font-size: 62.5%; /* Igualamos 1em a 10px */
}

Y luego, establecer el tamaño de la fuente de las secciones o elementos de nuestro sitio, por ejemplo el contenido.

#content {
font-size: 1.6em;
line-height: 1.6em;
}

1.6em es igual a 16px.

El line-height es la distancia entre las lineas.

The Art and Science of CSS: Gratis!

Quedan casi 7 días para poder obtener nuestra copia PDF completa del libro The Art and Science of CSS totalmente Gratis. Lo único que debemos hacer es ingresar a nuestra cuenta en twitter y convertirnos en Follower de sitepointdotcom, transcurrido unos minutos nos llegará un mensaje directo (también al mail) con el enlace de descarga. El libro es full color, con más de 220 páginas y comprimido pesa 24megas.

Si no usan twitter pueden solicitarlo vĂ­a email en el siguiente enlace.

Enlace | Twitaway: The Art & Science of CSS

Free CSS Drop-Down Menu es un framework que no solo nos separa el código HTML del CSS y facilita el trabajo; sino que además, las definiciones CSS son categorizadas de manera estructurada y temática. Así pues, la creación de un nuevo menú desplegable sólo implica aplicar un nuevo tema, ya que la estructura del menú es permanente.

free-css-drop-down-menu

Cualquier lista desordenada puede ser transformada en un impresionante menú CSS con sólo cambiar el nombre de la clase. Podemos crear menús verticales de izquierda a derecha, verticales de derecha a izquierda, horizontales en línea, horizontales desplegables de arriba abajo, de abajo arriba, y con unos diseños fabulosos.

Free CSS Drop-Down Menu es compatible con distintos navegadores, como Internet Explorer 5 o superior, Firefox 1,5 o superior, Opera 7 o superior, Safari 2 o superior.

Enlace | Free CSS Drop-Down Menu

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.

izzimenu

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

15 menús CSS horizontales con diseño profesional para descargar

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

Optimizar y Comprimir CSS online

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

SuscrĂ­bete

  • Suscribete a nuestro feed
  • Add to Google Reader or Homepage
  • Subscribe in NewsGator Online
  • Add to My AOL
  • Subscribe in Bloglines
  • Add to netvibes