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 ♥