Resalta tus textos con los bordes hechos a partir de imágenes

15.2.17


bordes css imagenes

¿Qué te parecería la idea de crear un borde con imágenes alrededor de un texto?

A mi me cautivó la idea!

Mira, ya sólo para empezar te enseño cómo queda de chulo el borde con imágenes, para que veas de lo que estoy hablando.



Esto es un texto normal con un borde chulo a su alrededor.




Pues esto que acabas de ver y con lo que se te han abierto lo ojos (sí, ¿verdad?) es sólo un par de líneas de código y listo.


Escoger la imagen

Antes de empezar con el código, tienes que decidir qué imagen vas a utilizar para poner de marco en tu texto (no siempre, sólo cuando lo necesites).

Las imágenes que yo utilizo siempre miden 19 x19 píxeles.

Yo las creo con Canva en un plis. Se pueden hacer copias y simplemente ir variando el color.

El tiempo que te ahorras haciendo los diseños en Canva, lo puedes dedicar a hacer otras tareas!

Sé que a veces es mejor que te den las cosas hechas, es por esto que te dejo un archivo con estos diseño que ves a continuación, para que utilices el que más te guste :-)

Aquí hay 25 imágenes, pero en el archivo que te puedes descargar hay un par más.


imagenes marco texto


Sube la imagen a tu blog

Ahora necesitas poner la imagen en tu blog.

No debe verse, sólo deber subirlo para obtener la URL.

Para hacerlo debes:

  1. Crea un nuevo post
    poner borde imagen
  2. Añade la imagen en el post, con el tamaño original

    borde imagenes texto
  3. Ve a la visión HTML del post

    poner imagenes css
  4. Copia la URL de la imagen y guárdala porque la necesitarás en el siguiente paso.

    Tu verás algo parecido a esto, y sólo tienes que quedarte con lo que he marcado en azul (será parecido pero no igual).

    borde html imagen

Cómo añadir el código CSS del borde con imágenes

Para añadir el código CSS lo puedes hacer de dos maneras distintas.

Yo te muestro una de ellas y si no te funciona, puedes utilizar la otra.

  1. Entra en Plantilla del menú lateral izquierdo de Blogger.

    codigo css marco
  2. Pincha en Personalizar.

    personalizar marco imagenes
  3. Busca "Avanzado" y luego "Añadir CSS".

    utilizar marco imagenes

  4. Pega el código siguiente en el recuadro blanco.


        #borderimg {
           border: 10px solid transparent;
           padding: 15px;
           border-image: url(URL_DE_TU_IMAGEN) 30 round;
        }

    Donde pone URL_DE_TU_IMAGEN debes poner la URL que has copiado del apartado anterior, ¿te acuerdas?

  5. No te olvides de guardar los cambios.

    html borde imagenes


Cómo utilizar el marco en un post

Ahora que ya tienes el código CSS subido a tu blog, sólo te falta saber cómo lo puedes utilizar en un post.


  1. Entra en el post que quieras utilizar el borde con una imagen.

  2. Entra en la visión HTML del post.
    poner imagenes borde
  3. Pega este código en el lugar exacto donde quieras el marco.


     

          <div id="borderimg">
          </div>


  4. A continuación escribe el texto que quieras entre las dos líneas anteriores.

  5. Vuelve a la visión "Redactar" del post y continua escribiendo lo que quieras :-)
guardar marco imagen





A mi la idea me encanta y queda muy original y divertido.

No olvides que siempre puedes hacer pruebas y crear otros diseños con los colores de tu blog o que se parezcan a tu logo!

¿Qué te ha parecido la idea? ¿Lo habías visto nunca antes así con una imagen? ¿Ya tienes pensado dónde lo vas a utilizar?
Nos vemos en los comentarios!



¿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.


2 comentarios:

  1. Me ha gustado muchísimo y lo veo facilísimo! Espero que en breve me salga a mí para poder tener unos post's mas completos y visuales ;)

    ResponderEliminar
  2. Muy interesante y parece muy fácil de hacer.
    Gracias por compartirlo.
    Un saludo

    ResponderEliminar