Revista Cultura y Ocio

Código para enmarcar un texto

Publicado el 13 noviembre 2013 por Cada Libro Un Mundo @PatricRo
No es la primera vez que me preguntan cómo hago para enmarcar la sinopsis o las citas de los libros. Por eso mismo hago este pequeño tutorial explicativo del código que utilizo para enmarcar los textos.
La verdad es que no soy una experta del html y apenas me defiendo lo suficiente como para decorar las entradas y hacer un diseño sencillo para el blog. Y aún así casi siempre aprendo algo nuevo preguntando a otros blogeros o leyendo tutoriales que hay por internet. Por eso mismo voy a aportar mi granito de arena con este pequeño tutorial, a pesar de que estoy segura de que el código ya está por internet (si no, ¿de dónde lo habría sacado yo?).
Para hacer el marco uso un código html de este estilo:
<div style="background: #e2cee7; border-radius: 5px 5px 5px 5px; border: 2px solid black; font-family: Trebuchet MS, sans-serif; margin-left: 50px; margin-right: 50px; padding: 7px; text-align: justify;"> TEXTO </div>
Eso sería un ejemplo. Se puede modificar de muchas formas, por eso mismo voy a explicaros qué podéis añadir/cambiar y para qué es cada cosa:
*background: es el color de fondo.
*border-radius: es el borde, puedes redondearlo poniendo más px (ej: 20px) o menos.. eso es algo que puedes ir viendo según te guste. Como ves hay cuatro cifras, cada una es por una esquina del marco.
*border: es el ancho del borde, puede ser de diferentes formas "solid" "double" "dotted" "groove" "dashed" "ridge" "inset" "outset". También de diferentes colores, en el ejemplo puse "black", pero puedes usar códigos html de colores o poner el nombre del color en inglés (lo malo de esto es que no siempre te sale el tono que quieres).
*font-family: es la fuente, para no hacerme un lío con tanto código yo la pongo en este código así ya no tengo que añadir fuente en el texto que vaya dentro del marco.
*margin-left: es el magen de espacio que dejas entre el lado izquierdo de la entrada y el cuadro de texto.
*margin-right: es el magen de espacio que dejas entre el lado derecho de la entrada y el cuadro de texto.
*padding: es el espacio entre el marco y el texto.
*text-align: pues lo mismo que con la fuente, es para ahorrarme más códigos.
Todo es cuestión de que vayáis probando a ver cómo quedan y qué combinación os gusta más. Espero que os haya servido. Y si tenéis alguna duda (no me suelo explicar muy bien) o alguna pregunta, podéis mandarme un mail y os responderé encantada :)

Volver a la Portada de Logo Paperblog

Dossier Paperblog