Este tuto fue a pedido de Nadia lo pondre porque es algo muy sencillito y me completa el post anterior de los bordes personalizados en imagenes xD asi que ahi va:
El efecto lo podran ver en mi blog de pruebas
de que trata este efecto?
muy sencillo de que el fondo cambie por otro cada que pasa el cursor sobre el.
ejemplo:
al pasar el cursor sobre el cambia el color de fondo asi:
El efecto lo podran ver en mi blog de pruebas
de que trata este efecto?
muy sencillo de que el fondo cambie por otro cada que pasa el cursor sobre el.
ejemplo:
al pasar el cursor sobre el cambia el color de fondo asi:
es muy cute n.n
para tener este efecto has lo siguiente:
ve a diseno >> Edicion Html >> Editar plantilla
y buscar el siguiente codigo: ]]></b:skin>
cuando lo encuentres pega este codigo arriba de ]]></b:skin>
.post img {
margin: 5px;
padding: 20px;
background:url(URL DE TU IMAGEN O FONDO)repeat;
-moz-border-radius: 3em 1em;
}
.post img:hover {
background:url('URL DE TU IMAGEN O FONDO') 10px top repeat;
-moz-border-radius: 3em 1em;
}
asi quedaria:
y luego dar guardar ^^
ahora como dije en el post anterior si quieres que tus imagenes tengan borde como la imagen:
El codigo seria este:
.post img {
margin: 5px;
padding: 20px;
background:url(URL DE TU IMAGEN O FONDO)repeat;
-moz-border-radius: 3em 1em;
border: 1px dashed #BDBDBD;
}
.post img:hover {
background:url('URL DE TU IMAGEN O FONDO') 10px top repeat;
-moz-border-radius: 3em 1em;
border: 1px dashed #F6CEF5;
}
puedes cambiarle el color del borde.. al terminar das clic en GUARDAR.
OMGG no pense que se me haria tan largo hacer el tuto xD bueno ahora el segundo tuto que es el mismo efecto hover pero con zoom en las imagenes.
NOTA: como es el mismo efecto hover no pueden ir las 2 juntas okei? o eliges lo de los bordes personalizados o el efecto zoom (como vez yo puse un efecto en mi blog de pruebas y el otro lo tengo en este blog xD) espero hacerme entender ^^
El ejemplo del efecto ZOOM lo pueden ver en este blog al pasar el cursor sobre el la imagen se hace un poco mas grande seguramente ya lo ha visto pero igual pondre una imagen aqui =P
pasa el cursor sobre ella
si quieres este efecto sigue los siguientes pasitos.
para tener este efecto has lo siguiente:
y buscar el siguiente codigo: ]]></b:skin>
cuando lo encuentres pega este codigo arriba de ]]></b:skin>
para tener este efecto has lo siguiente:
ve a diseno >> Edicion Html >> Editar plantilla
y buscar el siguiente codigo: ]]></b:skin>
cuando lo encuentres pega este codigo arriba de ]]></b:skin>
.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.9; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}
quedando asi:
ya solo das a guardar y listo
me regalas un comentario?
Annyz esta entrada esta super interesante, yo hice el otro y me quedo muy chulo, cuando me canse del otro haré este, pero esta muy bien me encanta como lo explicas, antes era una inútil al principio con mi blog, pero gracias a ti, estoy orgullosa de mi blog.
ResponderEliminarMuchas gracias de verdad siempre que me piden ayuda mis seguidores sobre diseños y cosas chulas para el blog, les doy tu blog para que te sigan y sepan hacer cosas en sus blogs.
Bueno, me gustaria saber si tienes algun tuto sobre como hacer una scroll bar en el blog, creo que se llama asi, seria hacerla personalizada, con la imagen del fondo en url y la cosa que sube y baja tambien otro url, yo tengo en mi blog uno, y me gusta, pero vi en otros blogs scroll bars como con bordes y se ven preciosas, soy una antojona, pero si me dijeras donde puedo enocontrar la pagina para hacerlo o le hicieras tu el tutorial cuando puedas o si ya le tienes echo que me lo informes y me pongas el link porfis jaja :)
besos y sigue asi :) Sandra
mil gracias por el tuto, ya queria yo saber como se lograban estos efectos :3
ResponderEliminarHi! Olaa annzy m encanta tu blog pero sigo sin saber como se hace TT^TT podrias poner un videoo! pliss
ResponderEliminarhola SANDRITA:
ResponderEliminarsi tengo un tuto sobreel scroll bar en pocos dias lo pondre por aqui espero te agrade y te sea de ayuda ^^
mini marta:
ResponderEliminarsorry martita pero no hago videos u.u solo copia el codigo y pegalo arriba de ]]skin como muestro en la imagen
te adorooooo siempre on aportazos! sinceramente no se que haria si se te ocurriera dejar de actualizar o cerrar el blog, muchas gracias por todos tus aportes!
ResponderEliminarhahah grax sakuu que lindaa.. me chiveas xD
Eliminarannyz me surgio una duda, como puedo poner un borde para todas mis imagenes??? pero solo el bordeee??
ResponderEliminarah mi niña el la entrada de abajo salia gomme el spam xD
ResponderEliminaroki no te preocupes ^^
EliminarHolaaa Annyz! sabes como puedo hacer girar una imagen de gadget? me copa el efecto esta buenísimo y me gustaría usarlo en una imagen en mi blog
ResponderEliminarmm como el tuto que gira las imagenes?? si se puede hacerlo en los gadgets peroooo se moverian todas las imagenes que tengas en todos los gadgets o.o no importa?
ResponderEliminarufa! yo sólo quería que se mueva una sóla imagen de gadget.... no podré hacerlo entonces! gracias annyz! besoo!!!
ResponderEliminar