Muchos os habéis preguntado infinidad de veces como hacer para aplicar estilo a las imágenes,para que se vean diferentes así que hoy os traigo un pequeño tutorial en el cual os mostrare como con un par de códigos se le puede agregar un impresionante estilo a las imágenes.
El resultado final del truco sera el siguiente.
La imagen a la que se le aplico el estilo es la siguiente:
Para añadir este estilo a las imágenes de tus entradas pega el siguiente código en la Edición de HTML de la entrada.
<center><img class="juvinao" height="250" src="URL DE TU IMAGEN" width="230" /></center><br /> <br /> <style type="text/css"> .juvinao {-webkit-transition: -webkit-transform .15s linear; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border:1px solid #c0c0c0; background: url(http://4.bp.blogspot.com/-B58Czi-_F-8/Te8BLDSGN8I/AAAAAAAABDw/9QfUQtipWbo/s320/free_high_res_texture_381.jpg) bottom no-repeat; padding:5px; padding-bottom:20px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); } </style>
La parte que esta en azul claro la reemplazas por la URL de tu imagen y los valores que están en azul oscuro son los que debes editar para configurar el tamaño de la imagen.
Espero que os haya gustado el tutorial y sigan visitando Mil Trucos Blogger.
10 comentarios
Darlyn · enero 9, 2012 a las 5:10 pm
Excelente truco lo aplicare a mis imagenes
FUNK · enero 9, 2012 a las 6:08 pm
Está muy bueno, pero si la imágen es muy grande se distorciona. Es una pena.
Juvinao · enero 9, 2012 a las 8:30 pm
FUNK para eso puedes configurar el tamaño de la imagen y listo.
Saludos.
Jorge Luis · enero 10, 2012 a las 8:34 pm
genial le probaré
aaron marquez · enero 11, 2012 a las 12:38 am
juvinao es el class me gusta genial = lo probare
Anonymous · enero 12, 2012 a las 9:00 pm
😀
Alexo Wolff · enero 14, 2012 a las 3:18 pm
Hola como te va?? te agradesco los Tutos.
te queria consultar algo que no puedo encontrar en ningun lado, que son las imagenes en fila de la barra lateral de : http://www.cgunit.net/
quiero una parecida para mi web y no se como generarlas con gatget o esas cosas, se como hacerlo manualmente pero quiero algo automatico.
Juvinao · enero 15, 2012 a las 12:14 pm
Alexo Wolff lo que pude ver fue que esas imagenes van a dar a etiquetas asi que me imagino que es un gadget pero para lograr tal efecto hay que tocar el codigo de la plantilla,luego mirare como hacer ese efecto y publicare un tutorial.
Saludos.
May · enero 16, 2012 a las 6:55 pm
Hermano! ¿se puede hacer eso con un texto hacia el mismo lado? Porque me gustaria poner un texto debajo de las imgenes de esa manera. Saludos.
Juvinao · enero 16, 2012 a las 7:16 pm
May la verdad no lo he intentado,no se hare prueba y luego te comento ok.