Firma Simple (mini-tuto)
Primero, dejaré un ejemplo y su código a modo de plantilla. Sobra decir que es 100% editable y utilizable ya sea o no como firma, y también puede ser usada como base para otras tablitas ¡Sin restricciones! Después, explicaré punto por punto todas sus propiedades para que puedan modificarla a su gusto.
Base:
CĂłdigo: Pasted.
ExplicaciĂłn:
El code comienza con la etiqueta “<center>” que cumple la función de... *redoble de tambores* ¡Centrar todo! Esta etiqueta afectará tanto a las cajas como al texto que contenga.
Continuamos con un “<div...”. Los divs son las cajas en si (el rectángulo en este caso) y se utilizan para prácticamente cualquier cosa. Los atributos que queramos darle a esta caja, tamaño, color, tipografĂa, etc. deberán estar dentro de las comillas del style, asĂ: “<div style=“aquĂ los atributos”>“.
El ejemplo costa de tres divs diferentes, uno para la imagen, otro para el texto grande y otro para el texto pequeño.
Nota: Todo lo que inicia debe acabar, por tanto, cada elemento que se abra (”<blabla>”) tendrá que cerrarse (”</blabla>”) o el code explotará :(
Atributos del primer div:
"background: url(https://i.imgur.com/6oRHGGN.jpg);", determina la imagen de fondo. Si se quisiera usar un color sĂłlido, habrĂa que reemplazar “url(https://i.imgur.com/6oRHGGN.jpg)“ por un color del tipo "#564512" o bien "rgb(86,69,18)". QuedarĂa algo asĂ: "background: #564512;" . Más colores.
“width: 300px;” determina el ancho en pixels y deberĂa corresponder con la anchura de la imagen de fondo, pero no es obligatorio.
“height: 200px;” determina la altura, también en pixels,
“padding-top: 70px;” determina la distancia entre el borde superior de la caja y el texto. Si se quisiera que el texto se ubicara en la parte superior del div, habrĂa que reducir este nĂşmero. Si se quisiera ubicar el texto en la parte inferior, habrĂa que aumentarlo.
“box-sizing: border-box;”, esto es un poco técnico, indica la manera en que debe procesarse el ancho y la altura del elemento. Aquà señalamos que el tamaño del elemento no se verá afectado por el valor de otros atributos, como pueden ser el padding, el border, etc. y nos ahorramos los cálculos engorrosos.
Atributos del segundo y tercer div (texto):
“font: 30px Caveat;“, aquĂ señalamos el tamaño de la fuente y la tipografĂa. “30px” es el tamaño. “Caveat“ es el nombre de la tipografĂa.
“color: #FFF;“, el color de la fuente, se pueden usar el mismo tipo de colores que indiqué arriba. Más colores.
GoogleFont: “<link href="https://fonts.googleapis.com/css?family=Caveat|Fira+Mono" rel="stylesheet">". Esto se utiliza para agregar fuentes/tipografĂas externas (que no estĂ©n instaladas en la PC). Para utilizar una o más tipografĂas, se debe acceder a GoogleFonts, cliquear sobre las elegidas para seleccionarlas y luego tomar el cĂłdigo similar a este que aparecerá en una pestaña en la parte inferior con la leyenda “Families Selected“. Reemplazar este por el nuevo.
Nota: Para editar Ă©ste o cualquier otro cĂłdigo, recomiendo utilizar el bloc de notas o similar sin autocorrector, ya que el Word tiene la mala costumbre de reemplazar las comillas rectas por curvas y agregar espacios entre otras cosas que pueden echar a perder los cĂłdigos.
Nota 2: Si algo no quedĂł claro o quieren que explique algo especifico, dejenme un ask con su consulta o un croquis de lo que tienen en mente.
Nota 3: Si les sirve, hacen cositas bonitas y quieren mostrarme, me encantará ver sus trabajos ♥
