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