Siempre me ha llamado la atención cómo los diseñadores de la llamada “Web 2.0” crean cosas realmente espectaculares con la simple combinación de XHTML y CSS. El CSS es tan potente que realmente uno puedo crear galerías, botones, menús y formularios entre otras miles de cosas sin la necesidad de programación. El poder del CSS realmente me dejó atónito.

Al crear mi blog de pronto se me ocurrió la idea de crear el logo para mi blog completamente en CSS. Después de varios bocetos, logré decidirme por el diseño que ustedes pueden apreciar en la esquina superior izquierda de esta página.

¿Cómo lo hice?

A decir verdad el proceso es muy simple y sólo requiere un poco de paciencia pues es solo cuestión de ajustar correctamente las medidas y posiciones de las palabras y de las letras.

Iniciamos con una div con clase logo donde pondremos nuestro código. En este caso, es un simple hipervínculo hacia la página principal de mi blog encerrado en un H1. Véamos:

<div class="logo">
<h1><a href="http://www.estilocss.com" title="Haga click aquí para ir a la página principal. Tecla de accesso:H" accesskey="h">Estilo CSS Tutoriales de CSS</a></h1>
</div>

Una vez se tenga listo el boceto del logo ya se sabrá cómo estarán ordenadas las diferentes palabras y/o letras. En mi caso para lograr el efecto deseado de mi logo, tuve que dividir el texto en 4 partes. Noten que yo generalmente nombro las clases de mis objetos en inglés. Eso me ayuda a diferenciar visualmente lo que es el contenido del texto de las etiquetas XHTML.

<div class="logo">
<h1><a href="http://www.estilocss.com" title="Haga click aquí para ir a la página principal. Tecla de accesso:H" accesskey="h"><span class="mainWord">Estilo</span><span class="css1">CS</span><span class="css2">S</span><span class="slogan">Tutoriales de CSS</span></a></h1>
</div>

El XHTML del logo ya está completamente listo. Sin embargo, yo quise ir un poco mas allá y decidí integrar una vCard al logotio a través del Microformato hCard:

<div class="logo vcard">
<h1><a class="fn org url" href="http://www.estilocss.com" title="Haga click aquí para ir a la página principal. Tecla de accesso:H" accesskey="h"><span class="mainWord">Estilo</span><span class="css1">CS</span><span class="css2">S</span><span class="slogan">Tutoriales de CSS</span></a>
<span class="email">contacto@estilocss.com</span></h1>
</div>

¡El logo está listo!. Ahora lo único que falta es darle vida con CSS, lo cual haré en una próxima entrada.

Recuerden que en ningún momento he dicho que esta es la manera correcta de crear logotipos. Mientras que el SVG ó una tecnología similar (que no sea Adobe® Flash™) no sea acogido por todos los exploradores de Internet, todo logotipo lamentablemente debe seguir siendo publicado como una imagen para mantener su consistencia en todos los navegadores. En resumen, yo decidí crear el logotipo de EstiloCSS.com en XHTML solo por diversión y no recomiendo crear logotipos de este modo.