Como colocar una imagen en el borde del blockquote

3 de noviembre de 2014


Hoy les traigo un corto y sencillo tutorial de como colocarle un pattern a los bordes del blockquote como pueden ver en la imagen de ejemplo o también pueden chequear el resultado en mi blog de pruebas

Paso 1

Vas a Plantilla | Editar HTLM | y encima de ]]></b:skin>  pegas el siguiente código:
     
blockquote {
background: #fafafa; /* Color del fondo de la caja */
padding: 5px;
color: #666; /* Color del texto */
border: 10px solid ; /* Grosor del borde */
box-shadow: inset 0 0 10px #bbb, 0 0 5px #bbb; /* Sombra dentro de la caja */
border-image: url('http://1.bp.blogspot.com/-UhGg4MhS2u4/VFg16nUcIXI/AAAAAAAAEvA/aSN5Vd6e1YM/s1600/3817521.png') /* Url de la imagen del borde */
    20 20 round; /* Escala de la imagen del borde */}

Paso 2

Ahora solamente debes de editar cada cosa a tu gusto:
Donde dice /* Escala de la imagen del borde */ es para ajustar el tamaño de la imagen que aparecerá en el borde del blockquote..
si pones un numero menor, como 10 10 round; la imagen será mas grande..
si pones un numero mayor como 30 30 round; la imagen será mas pequeña..

RECOMENDACIÓN
Si ya tenias tu antigua blockquote personalizada, te recomiendo que borres  el código que ya tenia tu plantilla y que lo remplaces con el que deje.. si no podría no quedar bien al superponerse ambos códigos..

13 comentarios:

  1. Gracias por el tuto.
    Aparte, tu blog está super bonito, me gusta la decoración!
    Besos***

    ResponderEliminar
  2. Hola esta muy util este tutorial, me gusto mucho!
    Me haria mucha ilusion que te pasaras pro mi blog y te unieras a el, seria un honor!
    Besos, te espero.

    ResponderEliminar
  3. Hola!!
    Gracias por compartir el tuto ^^ ayudas mucho!
    Besos

    ResponderEliminar
  4. Gracias por el tutorial, es muy interesante.
    P.D.:Vengo de la iniciativa blogs asociados, ya te sigo

    Besos

    ResponderEliminar
  5. Muchas gracias por el tutorial :D
    Genial blog ^^

    ResponderEliminar
  6. Hola! me gustó este tutorial, espero pronto ponerlo en práctica!
    Saludos! Y te sigo de la Iniciativa de Blogs Asociados :)

    ResponderEliminar
  7. Hola ya te sigo me uni a la iniciativa de blogs! Gracias!!! :D

    ResponderEliminar
  8. Hola! n_n Muy bueno el tutorial, te sigo!

    Besotes!

    ResponderEliminar
  9. Hola~! Hace mucho que no paso por aqui^^ espero que estes bien^^
    Genial el tutorial~
    saludos y besotes

    ResponderEliminar
  10. Hola ^-^
    Muy útil el tutorial :)
    Acabo de conocer tu blog y me quedo por aquí, que me ha gustado mucho :)
    Un beso enorme :D

    ResponderEliminar
  11. Hey! que buena idea... aunque no encuentre una imagen que colocar en el mio... y que se vea el código.. bueno aun así lo intentaré... muchas gracias por el tuto, me sirvió de mucho... slaudos.

    ResponderEliminar
    Respuestas
    1. puedes intentar con algunas de las patterns que hay en está página http://www.colourlovers.com/ suelen quedar bien .. además donde dice tamaño del borde si pones un numero más pequeño como 5px, se reducirá el grosor del borde o si pones un número mayor se hará más grueso :)

      Eliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)