miércoles, 11 de abril de 2012

poner bordes personalizados a una imagen

oKa ya tengo varios pedidos sobre este tuto sobre poner una imagen bajo la imagen para que el borde se vea personalizado es algo muy sencillito ya lo veran ^^

bien aqui el ejemplo de como se veria:




bien para empezar hay que seguir los siguientes pasos:

nos vamos a:

Diseno >> Edicion de Html >> Editar plantilla

y buscamos:

.post img {


y pegamos lo siguiente justo abajo de ese codigo

margin: 5px;
padding: 20px;
background:url(URL DEL FONDO O IMAGEN)repeat;
-moz-border-radius: 3em 1em;
}

en caso de no tener
.post img { solo pega o agrega todo el codigo completo arriba de ]]></b:skin>


Quedaria asi:




moradito : que tan grueso sera el borde.
rosadito: la direccion de la imagen o tu fondo
naranja: la forma del borde


si quieres que tenga borde tu imagen con este ejemplo:



El codigo seria este:

.post img {
margin: 5px;
padding: 20px;
background:url(URL DE TU IMAGEN)repeat;
-moz-border-radius: 35px;
border-radius: 35px;
border: 1px dashed #BDBDBD;
}

Aqui lo unico que se agrego fu el borde que esta en rojo es tu eleccion si quiers ponerlo o no o.o


Aqui una guia de las formas de los bordes

Borde 1


-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

BOrde 2


-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

Borde 3


-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

Borde 4


-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

Borde 5


-moz-border-radius: 35px;
border-radius: 35px;


espero les haya gustado el tuto y dejen sus coments okis ^^


31 comentarios:

  1. Annyz te amo, te adoro, jajaja eso era lo que quería, muchísimas gracias mi blog ahora quedara mas lindo gracias a ti, muchas gracias de verdad, sigue asi con el blog :)

    ResponderEliminar
  2. Haaay que bonito blog anny! Bueno una recomendación si? se me tarda en cargar tu blog unos minutos y nu se ven las imágenes D: y creo que esta muy formal hahaha hacen falta rayitos de sol aquí no? hahaha aun así muy muy bello anny ^^

    Gracias por la entradita se ha de ver kawaii en el blog eh! domo arigato!

    Sakuraura

    ResponderEliminar
  3. m...ahora que vi lo de "Tu comentario será visible tras la aprobación." crees que de alguna manera ese texto se pueda cambiar? algo como "tu comentario sera visto cuando to lo lea :)" o algo asi? o-o OMG

    ResponderEliminar
  4. Hola, me gusto mucho esos bordes, los quiero poner en mi blog pero el problema es que no tengo el código .post img {

    ResponderEliminar
  5. Hola anny, soy yo de nuevo por centesima vez xD talvez suene extraño pero ña verdad es que me gustaria saber como hacer plantillas porque he visto que kurumi y tu han cambiado su plantilla y yo con mi otro blog intente crear plantilla pero no lo logre, porfa espero que hagas un tuto de como crear plantillas o decirnos como o donde hiciste tu plantilla :)

    ResponderEliminar
  6. haha de nada sandrita ^^ besos y grax por comentar

    ResponderEliminar
  7. woo si qe se ve bien... pero vere si puedo hacerlo en las imagenes que yo quiera porq si lo hago como tu tuto sera para TOOOdDASSS las imagenes del blog no?? ya vere aun asi me das una idea que buen tuto!

    ResponderEliminar
  8. sakuraura:

    sii es como algo palidito verdad.. ya hace dias lo queria cambiar pero se mee olvidaba xD igual ya le cambie el fondo ahora si parece que le dio rico el sOl xD hahaha neni si te tarda en cargar un poco es porque tu coneccion no es muy rapida no es por el blog.. porque a mi no me tarda nada o.o

    ResponderEliminar
  9. y sobre lo de la otra duda de si se puede cambiar lo de "tu comentario sera visible tras la aprobacion" mmm creo que no se puede eso ya es por defecto del blog.

    ResponderEliminar
  10. Agustina:

    sip mira yo puse una notita ahi por si no te aparece el codigo

    == en caso de no tener el codigo solo pegalo todo completo arriba de ]]></b:skin> ==

    mjum solo tienes que ponerlo completo si no lo tienes osea que lo agregues

    .post img {
    margin: 5px;
    padding: 20px;
    background:url(URL DEL FONDO O IMAGEN)repeat;
    -moz-border-radius: 3em 1em;
    }
    saludos

    ResponderEliminar
  11. sakura:

    sobre la plantilla amm pues yo uso la picture windows, solo le cambie el fondo y los bordes.. todo lo demas que ves son solo gadgets.. pero la de kurumi si es diseñada mas bien a ella deberias ver si hace un tuto yo creo que no se negaria es bien buena onda :P

    ResponderEliminar
  12. :o Muchas gracias! le preguntaré a kurumi! :D! y a que sería genial lo de los comentarios *o* y gracias por responderme xD debería de escribir de ahora en adelante todo en un comentario haha! si se ve muy bonito el fondo rosita eh! :D le dio el sol del planeta RoSa Lol haha bonita noche anny!

    ResponderEliminar
  13. de nada sakura sorry por no haber podido ayudarte como querias..igual para ti buena noche nena

    ResponderEliminar
  14. Annyz, adoro você! seu blog é muito lindo! estou seguindo ^^
    segue o meu?
    adriellekawaii.blogspot.com
    te amo!! bjs^^

    ResponderEliminar
  15. jijijijiii........
    que lindo, pero ami nunca me salen las cosas que tiene que ver con la plantilla...........
    besos....
    ♥♥♥_______________♥♥♥_______________♥♥♥

    ResponderEliminar
  16. hah mary mira solo busca este codigo ]]></b:skin> y

    pega este codigo arriba del el.. asi como muestro en yna imagen

    .post img {
    margin: 5px;
    padding: 20px;
    background:url(URL DEL FONDO O IMAGEN)repeat;
    -moz-border-radius: 3em 1em;
    }

    saludos

    ResponderEliminar
  17. gracias por este aporte!!!! annyz queria consultarte una cosa tu sabes de algun gadget para cambiar el tipo de letra de mi blog??? el otro dia encontre uno, y aunque me resulto cuando miraba donde quedo salia casi todo el codigo, el codigo era muy largo pero no sabia que estaba mal y de tanto buscar no pude encontrar otro, si eres tan amable me puedes contestar al email? te lo dejo es saku.jpop@hotmail.es te lo agradeceria en el alma!

    ResponderEliminar
  18. Anny!! tu barrita esta muy kawaii,te lo suplico pon un tuto de eso lo llevo buscando toda mi vida O__O

    ResponderEliminar
  19. hola sakuchan

    no nena sorry no se a cual gadget te refieres ..u.u

    ResponderEliminar
  20. nekitha haha claro con gusto lo pngo pero dame tiempo sip?

    ResponderEliminar
  21. annyz mira esta pagina en ella esta el gadget que te digo ese lo pones como cualquier gadget y te cambia la letra del blog sin tener que indagar en edicion HTML, es una pagina en ingles asi que a lo mejor por eso esta el error que te comento

    http://www.thecutestblogontheblock.com/blog-secrets/147-how-to-change-font-on-your-blog.html

    veela en ella salen cuatro cuadritos con el codigo para cambiar la letra pero no se que esta mal ayudame porfis! trata de fijarte en el codigo de comic sans ms

    ResponderEliminar
    Respuestas
    1. oka ya lo checo.. y te aviso si puedo okis? besitos

      Eliminar
    2. graaaacias esperare su respuestaaaaa!!!!!

      Eliminar
  22. Gracias princesa! No me habia salido, pero lo volvi ahora a poner y ya si funciono! Besito y miles de gracias!

    ResponderEliminar
    Respuestas
    1. que bueno nena me da gusto te haya salido bien el truco.. se mira muy bonito verdad?

      Eliminar
  23. Hola!!! genial la info! me re sirvió para lo que quería hacer, pero necesito preguntarte algo. como puedo configurarlo para que mi borde se adapte a los distintos tamaños de fotos?, o debo si o si configurar todas las fotos al tamaño del borde? me puedes ayudar?
    gracias!!!

    ResponderEliminar
  24. por defecto el codigo que pongo aqui se adapta a los tamanios de dotos que pongas ya sea sin fondo o puro borde .. o tienes algun problema con las imagenes??

    ResponderEliminar
  25. Hola annyz, quisiera saber si me podes decir como poner los bordes pero no solo en las imágenes de las entradas sino también en las que subo en los gadget... Ojala puedas ayudarme, te dejo mi blog así te fijas, un beso enorme :D http://unasonrisa-hecha-pordos.blogspot.com.ar/

    ResponderEliminar
  26. voy a volver a probarlo! muchísimas gracias annyz!!!

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.