Cómo crear Icono RSS con CSS, vectorial y cross-browsers

Sí­, ya sé que debéis pensar que me aburro mucho para hacer este tipo de artí­culos, máxime cuando hay cientos de librerí­as y tutoriales sobre cómo crear este universal icono (1, 2, 3), pero es al contrario no me aburro, me divierto

Ventajas de crear un icono con CSS en vez de con una imagen:

• el icono será escalable y vectorial,
• con fondo transparente en todos los navegadores,
• y según el tamaño tendrá menor peso que una imagen.

Hay dos formas de crear el icono:

1. Utilizando la propiedad de esquinas o bordes redondeados. Una forma sencilla pero que no es compatible con IE ni con Opera  (Demo 1)
2. Utilizando texto. Cross-browsers, compatible con todos los navegadores. El siguiente icono está formado por 3 caracteres: «o», «o» y «.» con sólo CSS, puedes probar a aumentar el tamaño del texto (CTRL +) y comprobarás que es vectorial.

(Demo 2)

A continuación muestro el código necesario y al final algunas conclusiones.

Icono RSS con la propiedad CSS de esquinas redondeadas:

Creamos un div contenedor que llamamos icon-rss y en su interior dos capas anidadas para los dos arcos y el carácter del punto para el cí­rculo.

<a title="RSS" href="http://feeds2.feedburner.com/ceslava">

<!--// enlace al feed-->
<div id="icon-rss"> <!--// div contenedor, el que especifica el tamaño del icono-->
	<div class="ext"> <!--// arco exterior-->
		<div class="int"> <!--// arco central-->
			. 	<!--// el punto hace de cí­rculo-->
		</div>
    </div>
</div>
</a>

Ahora vamos a darle formato con CSS

#icon-rss { 
width:100px; /*definimos el tamaño del div contenedor*/
height:100px; 
overflow:hidden; /*ocultamos todo lo que sobresalga de este div*/
}

.ext { 
width:200px; /*definimos el tamaño del arco exterior*/
height: 500px;
margin:0 -120px; /*utilizamos un margen negativo para llevarlo a la izquierda*/
border: 10px solid #333; /*estas son las propiedades del borde*/
-moz-border-radius:0 100px 0 0; /*redondeamos la esquina superior derecha para Firefox*/
-webkit-border-radius:100px;/*redondeamos la esquina superior derecha para Chrome, Safari*/
border-radius:100px; /*propiedad CSS3 que dí­a harí­a este código compatible con todos los navegadores */
}

.int {
width:100px;
height: 300px;
margin:30px 50px; 
border: 10px solid #333;
-moz-border-radius:0 100px 0 0; 
-webkit-border-radius:50px; 
border-radius:100px; 
/*esto dará formato al punto*/
font-size:110px;
color:#333;
text-indent:42px;
line-height:23px;
}

a {
cursor:pointer; /*cambiamos el puntero para indicar que hay un enlace*/
text-decoration:none;
}

(Demo 1)

El problema de esta solución es que para Internet Explorer y Opera deberí­amos utilizar alguna de estas opciones para redondear las esquinas, de otro modo en estos navegadores veremos el icono de esta forma:

y en el resto (escalado):

Icono RSS con texto y CSS:

Ahora en vez de capas vamos a utilizar caracteres, para los arcos utilizamos la «o» y seguimos con el punto para el cí­rculo:

<a title="RSS" href="http://feeds2.feedburner.com/ceslava">

<!--// enlace al feed"”>

<div id="icon-rss"> 

<!--// div contenedor, el que especifica el tamaño del icono"”>

<span class="ext">o</span>
<span class="int">o</span>
<span class="circulo">.</span>
</div>
</a>

Y ahora el CSS

#icon-rss {
width:100px; /*definimos el tamaño del div contenedor*/
height:100px; 
overflow:hidden; /*ocultamos todo lo que sobresalga de este div*/
position:absolute; /*la position absolute del contenedor 
hará que otros elementos hijos también con absolute queden en su interior*/
font-family:"Courier New", Courier, monospace; /*definimos la fuente de sistema
 para que la "o" sea lo más circular posible*/
color: #333; /*definimos el color de los elementos de nuestro icono*/
}

#icon-rss span {
position:absolute; /*damos a los 3 elementos este valor*/
}
a {
cursor:pointer; /*cambiamos el puntero para indicar que hay un enlace*/
text-decoration:none;
}

.ext{
font-size:450px; /*damos tamaño a la "o" exterior*/
text-indent:-138px; /*damos posición horizontal a la "o" exterior*/
font-weight:300; /*damos grosor a la "o" exterior*/
line-height:153px; /*damos posición vertical a la "o" exterior*/
}

.int{
font-size:250px; /*damos tamaño a la "o" interior*/
font-weight:600;
text-indent:-75px;
line-height:174px;
}

.circulo{
font-size:110px; /*damos formato y posición al punto*/
text-indent:-25px;
line-height:136px;
}

(Demo 2)

Conclusiones

En resumen puedo decir que esto no es más que un simple experimento, el código que se genera no es semántico.

La 1º opción de los bordes redondeados requiere de alguna solución extra para que sea compatible con IE y Opera, si alguno quiere probar aquí­ publiqué 24 técnicas para generar esquinas redondeadas con CSS. Con la especificación CSS3 y los futuros navegadores se salvará este problema de compatibilidad.

La 2º opción puede ser divertida, espero tener tiempo para generar algunos iconos más sólo con CSS y texto. Lástima el renderizado del anti-aliasing

La he testado bajo Windows XP en las últimas versiones de IE, Safari, Opera, Chrome y en Firefox 3.0.11 (ya sé que ha salido la 3.5 pero prefiero esperar a que actualicen también Firebug)

Todas vuestras aportaciones, sugerencias y correcciones como siempre bienvenidas.

Dicotomí­as relacionadas en pqpq.es 

• Micro Blogging: Tumblr vs. Twitter
• Redes sociales ¿Twitter o Facebook?
• ¿Prefieres Twitter o RSS?
• ¿Tienes blog?
• ¿Es un blogger un escritor o un periodista frustrado?
• ¿Deben tener comentarios los Blogs?
• ¿Estamos llegando al fin del fenómeno blogs?