Mil Trucos Blogger

Aplicando estilo a las imagenes de tus entradas

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

10 Comentarios

  1. Darlyn Darlyn
    Enero 9, 2012    

    Excelente truco lo aplicare a mis imagenes

  2. Enero 9, 2012    

    Está muy bueno, pero si la imágen es muy grande se distorciona. Es una pena.

  3. Enero 9, 2012    

    FUNK para eso puedes configurar el tamaño de la imagen y listo.

    Saludos.

  4. Enero 10, 2012    

    genial le probaré

  5. Enero 11, 2012    

    juvinao es el class me gusta genial = lo probare

  6. Anonymous Anonymous
    Enero 12, 2012    

    😀

  7. Enero 14, 2012    

    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.

  8. Enero 15, 2012    

    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.

  9. May May
    Enero 16, 2012    

    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.

  10. Enero 16, 2012    

    May la verdad no lo he intentado,no se hare prueba y luego te comento ok.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo