Incluye: HTML/XHTML, CSS, Javascript, DOM, Mootools, jQuery, RGB, SEO y WordPress.

Se diferencia entre clientes de escritorio: Thunderbird (1 y 2), Outlook (2003 y 2007), Eudora, Windows Mail, Mac Mail, Entourage (2004 y 2008), AOL (9, 10 y Mac) y Notes 6 y entre clientes web: GMail, Hotmail, Live Mail, Yahoo (antiguo y nuevo), AOL Web y .Mac Web.

Estos cuadros son muy interesantes ya que cuando se envían mail, por ejemplo una newsletter, la mejor forma de asegurarse que el destinatario verá lo que tú quieres que vea y como a ti te gusta, es poner estilos “en línea” (es decir, con atributos style en cada tag HTML) o poniendo los propios estilos CSS embebidos en el mail, no con enlaces externos.

La verdad es que esto de los newsletters es otro mundo totalmente distinto. Si ya nos cuesta muchas veces hacer que nuestras webs se vean bien en Firefox, Internet Explorer (5.5, 6, 7..) e incluso Opera, Safari, etc, como podemos ver, en el mundo de los clientes web la cosa se complica hasta niveles altísimos.

La solución radica en lo de casi siempre intentar hacer las cosas lo más estándar posible y tener en cuenta qué usuarios tenemos y qué programas de mail tienen para intentar adaptarnos a la mayor parte de ellos.

Pasemos del Acid Test! Hagamos el Homer Test!!

Y para empezar, una recopilación de técnicas CSS de la web de noupe.com. En particular, lo que han denominado 101 CSS Techniques of all time que incluye temas como las animaciones (sprites) CSS, esquinas redondeadas, crear menús con listas, sombreados, paginaciones, puntuaciones(star rating), pop-ups, sitemap… y un montón más.

Está dividido en dos partes y también es bueno revisar los comentarios ya que hay aportaciones interesantes con respecto al tema.

Estos son los enlaces:

• Parte 1
• Parte 2

El truco es muy sencillo, se basa en colocar un contenedor, como por ejemplo un <span> en el mismo lugar del texto. Es decir, por ejemplo

<h1><span />CSS Gradient Text</h1>

Tras esto, se establece que el span tenga position: absolute para que esté referenciado en el mismo punto inicial que el texto y luego aplicarle un background de una imagen cuyo canal alpha sigue el patrón que más nos guste. En el caso anterior, el alpha disminuirá en la vertical desde 1 (opaco) a 0 (transparente), formando el efecto que se muestra.

El CSS sería este:
h1 {
position: relative; /* es probable que esta línea no haga falta en función de tu CSS */
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Según dicen los autores, dicen que han comprobado que funciona en Firefox, Safari, Opera e incluso en Internet Explorer 6 (con el hack PNG para el gradiente).

Y este caso no sólo se queda aquí, con un poco de imaginación y habilidad con la imagen del gradiente, podemos conseguir la forma de una cebra:

O incluso la de líneas horizontales: