David Garzón

Fórmula 1:

Valor en em = Tamaño en px deseado / Tamaño en px del elemento padre

Por ejemplo, si tienes un div con una fuente equivalente a 12px y deseas obtener un encabezado h3, dentro del div, de 21 px:

Tamaño en em = 21px/12px = 1.75 em

Si en vez de estar trabajando con em, estamos trabajando con tamaños en porcentaje. La fórmula sería:

Valor en % = (Tamaño en px deseado / Tamaño en px del elemento padre)*100

Fórmula 2:

Usar en las CSS la fórmula del 62.5

/*
Si establecemos el tamaño del texto por defecto al 62.5% del original,
tendremos que
1em = 10px
0.9em = 9px;
1.2em = 12px;
2.3em = 23px;
*/

body {
font: 62.5% arial, helvetica, sans-serif;
}

Nuestro amigo Victor de mis-algoritmos.com nos enseña una vez más su habilidad para hacer replicas.

Esta vez toca los buscadores como el de msn, digg o yahoo.

Con un simple código como este:

<form class="msn">
    <label for="q">Buscar</label>
    <input type="text" name="q" value="algoritmos" id="text"/><input type="submit" value="Search" id="search"/>
</form>

Y descargando la hoja de estilos css correspondiente, por ejemplo para el de msn como el de abajo seria este código css.

form.msn *{ margin: 0; padding: 0; }

form.msn{ padding:10px 20px; background-image:url(msn/images/fondo-azul.png); background-repeat:repeat-x; padding:45px 0 0 0; }

form.msn label{ display:none; }

form.msn input{ font-family:MS Shell Dlg; font-size:0.8em; vertical-align:top; }

form.msn input#text{ background-color:#fff; width:320px; height:1.6em; border:1px solid #59990e; padding:4px 4px 2px 10px; }

form.msn > input#text{ margin:1px 0 0 0; }

form.msn input#search{ background-color:#61a11c; background-image:url(msn/images/fondo-boton.png); background-repeat:repeat-x; font-weight:bold; color:#fff; height:2.2em; width:65px; border:1px solid #3f8e00; margin:1px 0 0 6px; padding:0 1px 2px 1px; }

form.msn > input#search{ margin:1px 0 0 6px; padding:-2px 1px 0 1px; }

form.msn input:hover#search{ background-color:#3e8d00; background-image:url(msn/images/fondo-boton-hover.png); }

Noticia original

Una lista bastante interesante de aplicaciones que nos pueden ayudar a realizar nuestros estilos. Organizado en diferentes categorías, nos podemos encontrar aquellas centradas en el tipo de letra, formularios, layouts, navegación, optimizadores y otras varias que no se pueden reunir en una categoría completa.

Entre la lista destacaría las siguientes:

• Em Calculator: para pasar tamaños de fuentes en pixels a em.
• JotForm: para crear formularios de forma online, arrastrando objetos y colocándolos en el sitio que deseemos.
• CSS Rounded Box Generator: nos ayuda a generar cajas con las esquinas redondeados.
• Firdamatic: nos crea layouts sin tablas.
• CSS Tab Designer: generador de pestañas.
• Listamatic2: generador de listados.
• CSS Menu Generator: generador de menú.
• CSS Love Child: este no es muy útil, pero si curioso, muestra un sitio web con el aspecto de otro sitio distinto.
• I Like Your Colors!: obtiene los colores de una css de un sitio web.
• CSSTidy: optimizador y validador de código CSS.

List of CSS Tools

Vía / dzone