¡Bienvenidos al primer tutorial de SCH! 

El día de hoy, enseñaremos cómo realizar una firma sencilla para tu personaje de rol en codificación, es decir, jugando con HTML y CSS. En este primer tutorial, aprenderemos lo más básico e iremos subiendo la dificultad (jugando y fusionando HTML y CSS, además como otras herramientas útiles de Tumblr) para elaborar cosas mucho más complejas. 

Así que si están listos, ¡aquí vamos!

Tutorial básico: firmas parte uno.

• Tiempo de lectura: 5 a 10 minutos.
  
• Dificultad: 1 de 5.
  
• Resultado:

Primer paso. Determina que tamaño deseas que sea tu firma, recuerda siempre debe estar acorde al máximo permitido en el foro donde te encuentras y una vez con las medidas en mente, debes ir a editar tu perfil > firma > y en el espacio que aparece a continuación (como si fueras a escribir un post), debes comenzar a codificar. El tamaño que elegí fue de 220 x 145 px. 

Segundo paso. Con el tamaño elegido, realiza tu imagen (puede ser en Photoshop, GIMP, cualquier herramienta gráfica que desees) y agrega tus respectivos filtros o colorings como más te gusten. 

Tercer paso. Una vez con la imagen realizada, empezamos la codificación. Lo primero que debes hacer es abrir una baliza (< div >; nunca se te olvide cerrarla inmediatamente o podrás desconfigurar el foro donde estés), a la cuál le agregaremos un style (quedaría < div style > ). Dentro de esa baliza, vas a utilizar una serie de propiedades para darle color y forma a tu firma. Yo he utilizado las siguientes:

• width, el tamaño de anchura de la firma. En mi caso, es 220px, así que lo agregaré de esta manera: width: 220px;
  
• height, el tamaño de largo de la firma. En mi caso, es 145px; así que lo agregué de esta manera: height: 145px;
• background, en este caso, como utilizaremos una imagen, debemos colocarlo así: background: url(ENLACE DE LA IMAGEN); en el enlace de la imagen, debes subirla a algún servidor como imgur, imageshack, photobucket, cualquiera que sea de tu gusto.
• margin, usaremos esto para centrarlo en vez de utilizar la baliza de < center >, dado que es mucho más fácil, dado que el margin (o margen en español) es la propiedad en CSS y HTML que establece los márgenes entre un elemento y sus límites, lo cual nos ayuda a “resumir” nuestro código. El valor que le daremos al margin es auto: margin: auto;
• outline & border, utilizaremos estas dos propiedades para darle una especie de “doble delineado”, con la elección de colores acorde a nuestro gusto e imagen. En mi caso, utilicé el color #ffedee para mi outline con un grosor de 10px y el color  #d69097 para mi border con un grosor de 3px, ambos en solid, lo que debería quedar de esta manera: outline: 10px solid #ffedee; border: 3px solid #d69097; 
• cerramos la primera baliza.

Hasta el momento, deberíamos tener una imagen así con nuestros respectivos colores:

Cuarto paso. Vamos a agregar nuestro texto principal y nuestro título para la firma. Dentro de la baliza anterior, vamos a repetir el tercer paso (abrimos una baliza de div style) haciendo unas modificaciones:

• width, debe ser mucho más pequeño que la primera caja (la que contiene la imagen), en mi caso utilicé un width de 60px, quedando así: width: 60px;
  
• height, lo coloqué en 125px, quedando así: height: 125px;
• padding, añadí esta propiedad, la cual se utiliza para agregar espacios a objetos con respecto a sus bordes. Le agregué un padding: 10px;
• background, esta vez no utilizaré ninguna imagen, sino un color sólido, por tanto, simplemente le agregué el color en HEX y su respectiva opacidad, quedando de esta manera background: #ffedeed4;
• font, aquí es donde personalizo la forma de la letra que usaré, en mi caso fue calibri (la fuente), en tamaño 7px, quedando así: font: 7px calibri; además de ello, agregué otras propiedades para modificar el texto, que fueron las siguientes: text-transform: lowercase (para que todo el texto apareciera en minúscula); letter-spacing: 1px (para agregar un espacio entre letra y letra), y color: #aa747a, para darle un color diferente.
• position y left; para mover la caja hacia la derecha, utilicé un positivo: relative; y un left: 110px; por supuesto, no es obligatorio usar estas mismas medidas, sino que puedes jugar con las que a ti te gusten, creando el efecto o forma que desees.
• Agrega el texto que te gustaría, ten mucho cuidado con la cantidad y que no se vaya a desbordar de tu caja.

Quinto paso. Para nuestro título y sin salirse de la baliza del cuarto paso, vamos a crear otra baliza, con estas modificaciones: div style=“font: 20px abril fatface;text-align: center;color: #ffffff;letter-spacing: -1px;line-height: 13px;padding-top: 10px;text-shadow: 1px 2px 1px #d69097;

• font; en vez de calibri, usaremos abril fatface en 20px, por lo cual, deberíamos tener algo así: font: 20px abril fatface; 
  
• text-align, esto indica la alineación del texto, en mi caso, lo he puesto en center;
• color, letter-spacing; los he cambiado ambos, he agregado el color de #fff (blanco) y -1px en el valor del spacing.
• padding-top, he colocado esto (para dar un espacio entre el borde superior y mi título) de 10px
• text-shadow, para agregarle esa sombra, existen 3 valores a los que les debes prestar atención: en mi caso, tengo esto text-shadow: 1px 2px 1px #d69097. El primer 1px al x offset (horizontal), la distancia desde el punto 0 (imagínate como un plano cartesiano) hacia la derecha, el 2px corresponde al y offset (vertical), la distancia del punto 0 hacia el sur (abajo) y el 1px final, corresponde a la cantidad de blur o difuminación de la sombra. Finalmente, los últimos números corresponden al código hexadecimal del color de mi sombra.
• Cerramos la baliza del paso cuatro y el paso cinco.

Y hemos terminado. Si tienes alguna duda o pregunta, puedes enviarnos un mensaje a través de nuestro askbox. Todo es bienvenido.

Reminders:

1. La baliza de la imagen de tu firma es la caja principal, esta contiene las otras dos balizas, es decir: <PRIMERA BALIZA/IMAGEN> <BALIZA DEL TEXTO> <BALIZA DEL TÍTULO> </CIERRE BALIZAL DEL TÍTULO> </CIERRE BALIZA DEL TEXTO> </CIERRE PRIMERA BALIZA/IMAGEN>
   

Tips:

1. Revisa siempre que todas las balizas estén cerradas ( < / div > *sin espacios*), en el tutorial has abierto tres balizas, por ende, al final del código deben haber tres balizas cerradas al final.
   
2. Juega con los colores, left, right, top, width, height, padding, border, outline, text-shadow, esto dará más riqueza y variedad. No te encasilles con una sola posición o diseño, recuerda que existen muchas otras propiedades que puedes utilizar.