Cómo instalar un efecto pushbutom en las imágenes

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

El efecto pushbutton es el efecto que se le da a un elemento que simula un botón presionándose, en otras palabras, el elemento da la ilusión de tener un hundimiento cuando se hace click sobre él o cuando pasamos el cursor encima.





El código para este efecto es de lo más sencillo, sólo hay que entrar en Plantilla | Edición de HTML y antes de ]]></b:skin> pegar lo siguiente:
.post img:hover {
position: relative;
top: 1px;
left: 1px;
}

Y listo, así se simple las imágenes de las entradas tendrán este efecto al pasar el cursor sobre ellas.
Si deseas que el efecto pushbutton se aplique a todas las imágenes del blog, entonces pégamos este código en lugar del anterior:
img:hover {
position: relative;
top: 1px;
left: 1px;
}

Si quisieras que el efecto sólo se aplique a las imágenes que tú elijas, entonces omitimos esos códigos y pegamos este:
.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}

Y luego cuando quieras que una imagen tenga el efecto pushbutton usas este código:
<img class="pushbutton" src="URL de la imagen" />

Sólo cambia la URL de la imagen y listo. Esa imagen tendrá el efecto pero las demás no.

0 comentarios:

Publicar un comentario

¡Gracias por comentar!

Related Posts Plugin for WordPress, Blogger...