Código para enmarcar un texto | Tutorial

13.11.13

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: #FFFFFF; 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 :)

6 Mundos

  1. Parece que me hayas leído el pensamiento. Hace tiempo que quería probar a hacerlo, pero no tenía ni idea. Lo probaré y a ver qué me sale. Gracias Patricia :)

    ResponderEliminar
  2. Es interesante para la gente que no sepa sobre HTML y tal (: yo sé por Source Code + CSS y algo de JS xD

    un beso ^^

    ResponderEliminar
  3. Gracias era justo lo que estaba buscando.

    ResponderEliminar
  4. ¡Hola! ¿Cómo haces para que la portada del libro quede sobre la linea y no dentro del cuadro? Gracias.

    ResponderEliminar
    Respuestas
    1. ¡Hola! Pongo primero la imagen de la portada, un espacio
      (< br / >) y después el código del cuadro con el texto. Una vez puesto esto ya vas mirando cómo lo quieres cuadrar.
      Espero haberte ayudado :)
      Un beso.

      Eliminar
    2. ¡Oh! Muchas gracias. No había encontrado como hacerlo. Nunca había visto tu blog, pero le he estado echando el ojo y me gusta bastante. De nuevo, gracias :)

      Eliminar