Bueno. Ya hemos creado apropiadamente el logo en HTML. Ahora lo que tenemos que hacer es darle forma y qué mejor manera de hacerlo que en CSS. Antes que nada sin embargo, crearé un documento XHTML completo a partir del que creamos en el tutorial anterior.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>Logotipo de EstiloCSS.com</title> </head> <body> <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> </body> </html>
Perfecto. Ahora para agregarle el CSS al XHTML he creado el archivo ‘logo.css’ dentro de una carpeta llamada ‘CSS’ ubicada en el mismo lugar donde he creado mi archivo XHTML. Ahora es solo cuestión de agregar el vínculo apropiado por medio de la etiqueta <link> dentro de <head>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" media="screen" href="css/logo.css" /> <title>Logotipo de EstiloCSS.com</title> </head> <body> <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> </body> </html>
El XHTML ya está 100% finalizado. Ahora empieza la parte interesante. Debemos editar nuestro archivo ‘logo.css’. Sin embargo, antes que nada por favor descarga el archivo reset.css del cual hablé en mi artículo ‘Sobrescribir hojas de estilo por defecto‘ y colócalo dentro de la carpeta ‘CSS’.
Ahora debemos llamar el archivo ‘reset.css‘ desde ‘logo.css’, el cual está vinculado con nuestro archivo HTML. Para hacerlo simplemente agrega la siguiente línea justo al inicio del archivo ‘logo.css’:
@import url('reset.css');
¡Excelente!. En este momento debemos tener algo muy similiar a lo siguiente:
Bien. Para empezar lo que tenemos que hacer es asignarle al documento una fuente. En mi caso, seleccioné la famosa ‘Trebuchet MS’. También es necesario asignarle al mismo documento un tamaño de fuente base. Escogí 16px ya que por convención popular la gente prefiere que ese sea el número de pixeles asignado a un valor em (es decir 1em = 16px). Recuerda que un em equivale técnicamente a la distancia exacta que ocupa una letra ‘m’ en el tipo y tamaño de fuente actual. Hacer el logo con valores em permitirá que este se expanda o se contraiga proporcionalmente en caso de que el tamaño de la fuente cambie o que el usuario haga uso de las funciones de amplificación del explorador. Inserta el siguiente código en logo.css justo después de la línea anterior.
@import url('reset.css'); body { font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 16px; /*TAMAÑO DE FUENTE BASE*/ }
Lo siguiente es definir el tamaño que tendrá nuestro logo. Para ello simplemente le daremos dimensiones a la caja <div> que contiene el <h1>. Temporalmente y únicamente con el fin de ver la caja mientras trabajamos en el logo, le daremos un color de fondo no tan oscuro para poder trabajar fácilmente. Deseo que mi caja tenga el tamaño de 120px de ancho por 305px de alto en mi monitor pero como quiero que mi logo sea fácilmente modificable dependiendo del tamaño de fuente base convertiré todos los valores en pixeles a su correspondiente en ems por medio de la gran utilidad http://pxtoem.com/. Nota también que le he asignado a dicha caja una posición relativa lo que me permitirá ubicar objetos internos apropiadamente mediante posiciones absolutas.
Por último, también le he asignado a mi logo (mi <a>) un tamaño de fuente base de 100px por que se veía bien en mi monitor. Al convertirlo a em, la fuente base equivale a 6.25em.
@import url('reset.css'); body { font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 16px; /*TAMAÑO DE FUENTE BASE*/ } div.logo { height: 7.5em; width: 19.063em; position: relative; background-color: #EEE; } div.logo h1 a { font-size: 6.25em; }
Ahora lo que quiero hacer, es eliminar visualmente el correo electrónico que hace parte de el Microformato hCard.
@import url('reset.css'); body { font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 16px; /*TAMAÑO DE FUENTE BASE*/ } div.logo { height: 7.5em; width: 19.063em; position: relative; background-color: #EEE; } div.logo h1 a { font-size: 6.25em; } div.logo span.email { display: none; }
Una vez hayamos hecho eso, podemos proseguir a darle color y ajustar el tamaño de la letra a cada una de las secciones de mi logo, es decir a span.mainWord, span.css1, span.css2 y span.slogan.
@import url('reset.css'); body { font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 16px; /*TAMAÑO DE FUENTE BASE*/ } div.logo { height: 7.5em; width: 19.063em; position: relative; background-color: #EEE; } div.logo h1 a { font-size: 6.25em; } div.logo span.email { display: none; } div.logo a span.mainWord { color: #c2d0d1; } div.logo a span.css1, div.logo a span.css2 { color: #7BA1A8; } div.logo a span.css1 { font-size: 0.49em; } div.logo a span.css2 { font-size: 1.6em; } div.logo a span.slogan { background-color: #7BA1A8; color: #FFFFFF; font-size: 0.2em; }
Creo que es importante aclarar algo con respecto al tamaño de las letras y la relatividad de las medidas em. Para lograr que span.css2 tenga una letra mucho más grande que cualquier zona del logo decidí asignarle un valor de 160px al tamaño de su fuente por que creí que se veía bien en mi monitor. Para lograr convertir ese valor a su cifra correspondiente en em, me di cuenta de que span.css2 está dentro (o pertenece a) de un <a> que lo contiene. También me di cuenta de que le había asignado una tamaño de letra de 6.25em a ese mismo <a> lo que generaba un <a> 6.25 veces discutiblemente más grande que mi fuente base de 16px lo que equivaldría a 100px en mi monitor. Al hacer esto, hemos agregado un nuevo punto de referencia ó una nueva fuente base por decirlo así de la cual todos los elementos que estén dentro ó que pertenezcan a este nuevo <a> modificado tendrán que acogerse.
Para lograr que span.css2 logre un tamaño de 160px con respecto a los 100px que tiene el elemento que lo contiene (el <a>) simplemente es cuestión de una simple regla de tres. ¿Si 100px es equivalente a 1em (por que mi <a> es el nuevo punto de referencia) entonces cuantos ems equivale 160px (el valor em que deseo obtener)?.
También podemos hacerlo a través de la utilidad http://pxtoem.com/. Las mismas reglas aplican para cada objeto al que le queramos modificar el tamaño de su letra.
Ya que todos nuestros textos tienen el tamaño indicado ya podemos iniciar el proceso de posicionamiento. Ya que cada <span> que compone el objeto <a> es un objeto lineal (o en inglés, un objeto in-line) en lugar de un objeto bloque, para poder moverlo tendremos que darle una independencia total del <a> que lo contiene.
Para poder también mover los dichos objetos <span> en relación con la capa que los contiene, es decir <div class="logo"> (la cual tiene asignada una posición relativa a través de nuestro CSS), tendremos que asignarles a cada objeto una posición absoluta. De esta manera, al mover cualquier objeto <span> siempre estaremos moviendolo tomando como referencia a nuestro objeto <div>. Creo que esto es importante así que debo escribirlo de nuevo:
Para mover cualquier objeto en relación al objeto que lo contiene (o al que le pertenece) es necesario que este último tenga asignada una posición relativa y que el objeto que deseamos mover tenga asignada una posición absoluta por medio de CSS.
@import url('reset.css'); body { font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 16px; /*TAMAÑO DE FUENTE BASE*/ } div.logo { height: 7.5em; width: 19.063em; position: relative; background-color: #EEE; } div.logo h1 a { font-size: 6.25em; } div.logo span.email { display: none; } div.logo a span.mainWord { color: #c2d0d1; display: block; position: absolute; } div.logo a span.css1, div.logo a span.css2 { color: #7BA1A8; display: block; position: absolute; } div.logo a span.css1 { font-size: 0.49em; } div.logo a span.css2 { font-size: 1.6em; } div.logo a span.slogan { background-color: #7BA1A8; color: #FFFFFF; font-size: 0.2em; display: block; position: absolute; }
Al hacerlo, deberíamos tener algo como lo siguiente:
Ahora lo único que falta es darle la posición correcta (a través de prueba y error) a cada objeto. Se puede hacer primero en pixeles y luego cuando se termine, proceder a reemplazar los pixeles por valores em.
@import url('reset.css'); body { font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 16px; /*TAMAÑO DE FUENTE BASE*/ } div.logo { height: 7.5em; width: 19.063em; position: relative; background-color: #EEE; } div.logo h1 a { font-size: 6.25em; } div.logo span.email { display: none; } div.logo a span.mainWord { color: #c2d0d1; display: block; position: absolute; left: -0.07em; top: -0.12em; } div.logo a span.css1, div.logo a span.css2 { color: #7BA1A8; display: block; position: absolute; } div.logo a span.css1 { font-size: 0.49em; top: 1.55em; left: 3.8em; } div.logo a span.css2 { font-size: 1.6em; top: -0.125em; left: 1.45em; } div.logo a span.slogan { background-color: #7BA1A8; color: #FFFFFF; font-size: 0.2em; display: block; position: absolute; top: 4.15em; left: 0; }
Hemos terminado. Lo único que falta es ajustar las dimensiones de span.slogan y estaremos listos. A continuación puedes ver el código CSS final e inmediatamente después la captura de pantalla del resultado final.
@import url('reset.css'); body { font-family: 'Trebuchet MS', Arial, Verdana, sans-serif; font-size: 16px; /*TAMAÑO DE FUENTE BASE*/ } div.logo { height: 7.5em; width: 19.063em; position: relative; background-color: #EEE; } div.logo h1 a { font-size: 6.25em; } div.logo span.email { display: none; } div.logo a span.mainWord { color: #c2d0d1; display: block; position: absolute; left: -0.07em; top: -0.12em; } div.logo a span.css1, div.logo a span.css2 { color: #7BA1A8; display: block; position: absolute; } div.logo a span.css1 { font-size: 0.49em; top: 1.55em; left: 3.8em; } div.logo a span.css2 { font-size: 1.6em; top: -0.125em; left: 1.45em; } div.logo a span.slogan { background-color: #7BA1A8; color: #FFFFFF; font-size: 0.2em; display: block; position: absolute; top: 4.15em; left: 0; width: 9.05em; height: 1.45em; text-align: center; padding-top: 0.35em; }
El fin de este tutorial es simplemente la práctica de las medidas ems. Yo se que son algo intimidantes pero con práctica y a través de la utilidad pxtoem.com el proceso se hace mucho más fácil. Lo más interesante de todo esto es que como dije al principio del tutorial, el uso de medidas ems permiten hacer diseños que se pueden re-dimensionar muy fácilmente de manera proporcional. En este caso por ejemplo, noten cómo al cambiar mi tamaño de fuente base de 16px a 5px he generado automaticamente un logotipo mucho más pequeño manteniendo exactamente las proporciones de cada elemento que comprende mi logotipo.
Espero que les haya gustado o servido mi tutorial. Cualquier comentario o pregunta será más que bienvenida.