Aprende a enmarcar textos en tu blog y personalizarlos tanto como te apetezca

15.6.16

Ya te he contado en varias ocasiones cómo lo puedes hacer para poner un fondo de color o una imagen de fondo en una parte de tus posts.

¿A veces esto de poner un fondo lo ves demasiado para tu post?

Pues la solución es enmarcar el texto, con el estilo de tu blog.

poner borde texto

Hoy aprenderás varias maneras para poder poner un marco a tus textos, con estilos diferentes y con un código especificado para cada caso.

Este código lo tienes que poner en tu post, en el momento determinado que quieras enmarcar un texto con un borde, siempre debes hacerlo desde la versión HTML del post.


1. Pincha en el botón HTML, de arriba  a la izquierda cuando escribes un post.

borde texto html

2. Busca en tu código el lugar donde quieres añadir el texto con el marco.

3. Añade alguno de los códigos siguientes y personalízalos.

4. Añade el texto que quieras en lugar de TU_TEXTO

5. Vuelve otra vez a la versión Redactar y continúa tu post.




Cómo poner un marco alrededor de un texto

Este es un marco de lo más normal y sencillo. El básico.


    <div style=" border-style: solid;">
    

    TU_TEXTO

    </div>


Así es como lo verás:


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.



Dejar espacios entre el marco y el texto

Está claro que no te gusta (a ti ni a nadie) que el marco quede tan pegado  al texto, esto da sensación de agobio. Es por esto que puedes añadir un espacio entre el texto y el marco


    <div style=" border-style: solid; padding: 15px;">

    TU_TEXTO


    </div>


  • padding: es el espacio que hay entre el texto y el marco.

Así es como lo verás:


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


Si por la razón que sea deseas dejar diferentes espacios arriba, abajo, a la derecha o a la izquierda, puedes definir los espacios por separado. Mira el ejemplo siguiente:


    <div style=" border-style: solid; padding-top: 15px; padding-bottom:5px; padding-left:40px; padding-right:1px;">

    TU_TEXTO


    </div>



  • padding-top: el espacio superior entre el texto y el marco.
  • padding-bottom: el espacio inferior entre el texto y el marco.
  • padding-left: el espacio izquierdo entre el texto y el marco.
  • padding-right: el espacio derecho entre el texto y el marco.

Aquí puedes ver que en cada lado del marco, el espacio entre el texto y el marco es distinto.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


Poner color al marco del texto


    <div style="border-color:#ff0000; border-style: solid; padding: 15px;">

    TU_TEXTO

    </div>



Así es como lo verás:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.



Si quieres darle un toque diferente y/o divertido, también puedes poner cada lado del borde de un color diferente.




   <div style="border-color: #009380 #800093 #938000 #930013; border-style: solid; padding: 15px;">

    TU_TEXTO

    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


  • border-color: el primer código es del color del borde superio, el segundo del borde de la derecha, el tercero del borde de la parte superior y el último del borde izquierdo.

Hacer el marco más ancho

Por defecto el ancho del marco es de 3px, pero tú lo puedes hacer tan ancho como quieras o un poco más fino.


El ejemplo siguiente tiene 1px de ancho de borde, un poco más estrecho de lo normal.


  <div style="border-style: solid; border-width: 1px; padding: 15px;">

    TU_TEXTO


  </div>



  • border-width: ancho (en píxeles) del borde.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.



El ejemplo siguiente tiene 15px de ancho de borde, mucho más ancho de lo normal.


  <div style="border-style: solid; border-width: 15px; padding: 15px;">

    TU_TEXTO


  </div>



Ten en cuenta que a pesar de que el ancho del marco sea más ancho, el espacio entre el texto y el marco continuará siendo el mismo. Es decir, que el marco "no se pone encima" del espacio existente.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.



Si te gusta lo "original", también puedes crear un marco donde cada lado tenga un ancho diferente.



  <div style="border-style: solid; border-width: 1px 8px 15px 3px; padding: 15px;">

    TU_TEXTO


    </div>



  • border-with indica en ancho de la parte superior, en ancho del lado derecho, el ancho de la parte inferior y el ancho del lado izquierdo.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


Cambiar el estilo del marco alrededor del texto


En los ejemplos anteriores el estilo del marco era continuo (en inglés es solid). Si deseas cambiar el estilo del marco, podrás escoger entre los siguientes:

dotted: marco con puntitos


    <div style="border-color: #ff0000; border-style: dotted; padding: 10px;">

    TU_TEXTO


    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


dashed: marco con rayas


    <div style="border-color: #ff0000; border-style: dashed; padding: 10px;">

    TU_TEXTO

    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


double: marco con dos rayas

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.



    <div style="border-color: #ff0000; border-style: double; padding: 10px;">

    TU_TEXTO

    </div>



A partir de ahora los ejemplos estarán un borde de 15px de ancho, para que veas bien el estilo del marco, porqué si es muy estrecho, no se puede apreciar los detalles.


groove: marco que da la sensación que hay una especie de ranura 3D, es decir que está hundido.


    <div style="border-color: #ff0000; border-style: groove; border-width:15px; padding: 10px;">

    TU_TEXTO

    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


ridge: marco que da la sensación que hay una especie de cresta 3D, es decir, que sobresale.


    <div style="border-color: #ff0000; border-style: ridge; border-width:15px; padding: 10px;">

    TU_TEXTO

    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


inset: recuadro con la parte superior e izquierda más oscuro que el color definido. El color del borde es el del lado inferior y derecho.


    <div style="border-color: #ff0000; border-style: inset; border-width:15px; padding: 10px;">

    TU_TEXTO

    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


outset: recuadro con la parte inferior y derecha más oscuro que el color definido. El color del borde que has escogido es el de la parte superior e izquierda.


    <div style="border-color: #ff0000; border-style: outset; border-width:15px; padding: 10px;">

    TU_TEXTO

    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


Si te gustan más las combinaciones, puedes crear un borde con diferentes estilos para cada unos de los lados.


<div style="border-color: #ff0000; border-style: solid dotted dashed double;
    padding: 10px;">

    TU_TEXTO


    </div>


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.



Cómo poner dos o más bordes de colores diferentes

 Y si te gustan los bordes aún más decorados, seguro que esto te encanta! Se trata de poner dos  bordes, de medidas diferentes, alrededor del texto.



    <div style="border-width: 5px; border-style: solid; border-color: #800093;">

    <div style="border-width: 10px; border-style: solid; 
    border-color: #009380; padding: 15px;">

      TU_TEXTO

    </div>
    </div>



En el primer <div>, que  corresponde al borde de fuera, en este caso el lila.

  • border-width: es el ancho del borde y puede ser más grande o más pequeño que el siguiente.
  • border-style: el estilo del borde, que puede ser igual o diferente que el siguiente.
  • border-color: el color el borde exterior.
En el segundo <div>, que corresponde al borde interior.

  • border-width, border-style y border-color es exactamente igual a lo que acabas de leer.
  • padding: es el espacio entre el borde interior y el texto 

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


En el caso de que quieras añadir un espacio entre los dos bordes, sólo tienes que añadir la propiedad padding en el primer <div>, tal y cómo está a continuación.



    <div style="border-width: 5px; border-style: solid; border-color: #800093; padding: 5px">

    <div style="border-width: 10px; border-style: solid; border-color: #009380; padding: 15px;">

       TU_TEXTO

    </div>
    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.


Si te emocionas con los colores también puedes poner varios marcos :-)


    <div style="border-width: 16px; border-style: solid; border-color: #009380;">

<div style="border-width: 12px; border-style: solid; border-color: #800093;">

<div style="border-width: 8px; border-style: solid; border-color: #938000;">

    <div style="border-width: 4px; border-style: solid; border-color: #930013; padding: 15px;">

       TU_TEXTO

    </div>
    </div>
    </div>
    </div>



"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.



Además de todas estas combinaciones, que espero que te sirvan y las puedas utilizar personalizadas a tu gusto en tu blog, también puedes hacer combinaciones de estos códigos si lo que buscas es algo más atrevido, como utilizar un estilo diferente para cada lado del borde y además un color diferente!

Seguro que encuentras tu estilo.

¿Ya habías utilizado los marcos en otras ocasiones? ¿Y en tus posts, enmarcas texto? ¿Piensas que falta algún tipo de borde que te gustaría utilizar? Nos leemos en los comentarios!



Laura



¿Te ha servido lo que has leído?

Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)


¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.