TUTOBLOG #4: Personalizar cuadros de texto

¡Hola corales!

¿Cómo está yendo vuestro año? Aunque parezca mentira ya estamos en MAYO. Es una locura, parece que solo han pasado unas semanas y de repente ¡puf! te das cuenta de que ya estas casi en el ecuador de 2019. He de decir que mi año está siendo tranquilito, no me ha pasado nada interesante y supongo que seguirá así durante mucho tiempo.

Pero no he venido aquí para hablaros del paso del tiempo, sino para ayudaros a hacer que vuestro blog tenga un aspecto más cuidado y bonito. Algo que todos los blogueros pasamos horas y horas tratando de perfeccionar. Hoy os traigo algo que puede ser de mucha ayuda para decorar vuestras entradas, ¡así que estad atentxs!

Código del cuadro:

<div style="background-color: #fcdfcc; text-align: center; border: 3px solid #ff542d; padding:5px; "> TEXTO QUE QUIERAS</div>

→El código en rojo es el color de fondo, si quieres cambiarlo solo tienes que buscar el código de color que desees y pegarlo en su lugar.
→El texto en verde es la alineación que tendrá el texto dentro de la caja. Con "center" estará centrado, con "left" estará en la izquierda y con "right" a la derecha.
→El número en naranja es el grosor del borde, si quieres hacerlo más grueso aumenta el número y para hacerlo más fino bájalo.
→La palabra en violeta es el tipo de borde de la caja, puedes cambiarla a tu gusto, poniendo las siguientes palabras según el tipo de borde que quieras:

__________ Solid

-------------- Dashed

................... Dotted

======== Double

→El código en azul es el color del borde, al igual que el color de fondo sólo tienes que buscar el código del color que quieras y pegarlo en su lugar.

→El número en rosa es la separación entre el borde y el texto del interior, cuanto más alto el número, más separado estará.

Insertar el cuadro:

Para insertar el cuadro en el texto que queremos primero debemos escribir el texto en la entrada de manera normal. Una vez que acabemos de escribir el texto que queremos encuadrar (después de encuadrarlo seguiremos escribiendo el resto para que no sea demasiado difícil luego buscar el texto con tanto escrito) debemos ir a HTML. 

Ahí veremos una serie de códigos que tal vez no nos suenen ni un pimiento pero tranquilxs, no debemos tocar nada de eso. Solo debemos añadir antes y después el código que os he compartido. Acordaos siempre de cerrar con el </div> después del texto encuadrado u os dará error. 

Y el resultado será algo así:

Ahora, para que veáis todas las posibilidades que tenéis de personalizar el cuadro, os voy a poner unos cuantos ejemplos, pues puede parecer que este modelo de cuadro es demasiado soso. 

Ejemplos:

<div style="background-color: #ffffff; border: 5px dotted #4451ff; padding: 5px; text-align: center;"> Ejemplo 1</div>

<div style="background-color: #dcffd8; border: 3px dashed #44c635; padding: 5px; text-align: center;">Ejemplo 2</div>

<div style="background-color: #f2d8ff; border: 2px solid #d27aff; padding: 5px; text-align: center;">Ejemplo 3</div>

Y esto es todo, espero que os ayude mucho a la hora de decorar vuestro blog; yo la verdad lo encuentro muy útil para resaltar citas de libros o datos importantes. 

Si tenéis alguna duda, dejádmela en comentarios y estaré encantada de resolverla, también si tenéis alguna sugerencia para futuros tutoriales (no muy difícil pues aún soy novata en esto). ¿Os ha resultado de utilidad?¿Lo usareis en vuestro blog?