Botones metállicos (PSD + HTML)

Botones metállicos

El otro día estuve echando un vistazo a dribbble y vi un montón de cosas interesantes que me dieron algunas ideas. Una de las primeras cosas que quise probar fue hacer unos iconos con este efecto, pero con un acabado metalizado.

El resultado final no está nada mal, como se puede ver en esta demostración en HTML. También está disponible el PSD en deviantArt por si alguien quiere ver como están hechos o editarlos.

El único inconveniente que tienen es que cada botón dependería de una imagen, la cual habría que editar en Photoshop: Después habría que ajustar el ancho del botón en CSS y cambiar el URL de la imagen de fondo si fuera necesario.

Para evitar esto y poder usarlos con el texto real del elemento HTML habría que recurrir a CSS3 y varios de sus nuevos atributos para simular el efecto lo mejor posible con bordes redondeados, degradados de color, sombras y transparencias, además de una imagen que se pueda repetir horizontalmente para la textura y el brillo final al metal.

Aunque algunos navegadores aún no tienen suficiente soporte CSS3, la mayoría de ellos en sus últimas versiones (algunas aún en beta, como en el caso de Firefox 4) si permiten crear los botones de este modo, así que estos días veré si puedo dedicarle algo de tiempo y consigo replicar el efecto lo mejor posible.

Etiquetas: , , ,

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>