8 Ene

Colección de efectos rollover CSS3

Realizar animaciones de botones, con CSS, cada vez es una tarea más complicada. CSS3 nos ha traído animaciones con muchas opciones que, en la mayoría de los casos, son difíciles de recordar y aplicar. Así que, para ayudar a todos aquellos que quieran tener una animación llamativa en su propia Web, le dejo este archivo CSS con todas las opciones ya escritas, listas para ser aplicadas. Y si no, sólo por ver lo que CSS3 es capaz de hacer, ya merece la pena echarle un ojo 😛

· Ver ejemplos de Hover.css y descargar

5 Nov

De Photoshop a CSS3

Siempre he pensado que el futuro del diseño Web pasará por herramientas como esta y que la maquetación HTML y CSS3 será un código que pocos llegarán a escribir y entender a fondo. Mientras espero ese momento con gran ansiedad, os presento este plugin de photoshop que, aunque no hace el código de toda la Web, sí que nos facilita la ardua tarea de llevar a CSS botones con efectos de sombra, degradados, bordes, brillos, etc.

¡Y si no os parece útil, al menos echarle un vistazo porque es increíble lo que CSS3 puede llegar a hacer!

– Descargar Plugin / addon para Photoshop CSS3Ps

31 May

Botones de navegación gratis en PSD

Aquí os dejo, en PSD, un par de botones para navegación Web. El acabado es genial.

– Descargar botones de navegación gratis en PSD

1 Abr

Botones sociales cosidos en PSD

Es raro que suba botones sociales, sobre todo porque hay tantos y tan fáciles de encontrar que rara vez merece la pena compartirlos. Pero en este caso el diseño está tan cuidado que me han llamado bastante la atención. Botones cosidos y con un acabado muy muy fino.

– Descargar botones sociales cosidos en PSD

22 Sep

Tutorial Photoshop – Botón Web

Diseñar un buen botón no es tarea fácil, hace falta mimar cada detalle y poner ojo al pixel. En el siguiente tutorial photoshop podréis ver 4 ejemplos bastante bien acabados de botones para tu Web.

• Ver tutorial Photoshop Botón Web

11 Sep

Haz tu propio menú CSS

Gracias a esta Web podéis confeccionar vuestro propio menú en CSS, admite todo tipo de configuraciones y parámetros como color y tamaños.

El proceso se lleva a cabo íntegramente por la Web y al final solo tendréis que copiar y pegar el código del menú.

Ver Contenido‘

Enlaces: ¿Botón o Texto?

Cuando poner un botón:

Los botones del sistema se deben utilizar en aquellas «acciones» que queremos que el usuario ejecute.

Por ejemplo:

· Enviar
· Buscar
· Descargar fichero
· Subir fichero
· Confirmar
· Guardar

Ejemplos de uso:

Tenemos una web llena de documentos que el usuario puede descargar.

El formato ideal para una página de este estilo sería:

· Titulo del fichero

Botón para descargar los ficheros fuera un botón del sistema etiquetado correctamente («descarga este fichero»).
Debajo del botón podemos indicar que va a pasar (si el usuario va a una nueva página, cuanto pesa el fichero, formato, etc…).

Cuando poner enlaces:

Los enlaces los debemos utilizar para vincular ficheros HTML. Es decir, el usuario va a ir a otra página web.

El formato de enlaces ha de ser claro y debe indicar que vamos a ver, evitando los «pincha aquí», «más información», etc…

El problema de poner bajo enlaces «acciones» que no son ver otras páginas web es que pueden confundir al usuario.

Si tenemos el formato anterior:

· Titulo del fichero

· Descarga fichero.

Debajo podemos indicar que va a pasar (si el usuario va a una nueva página, cuanto pesa el fichero, formato, etc…).

Uno podría adivinar que se va a bajar el fichero, pero se podría pensar que uno va a ir a la página de descargas.

Los botones no crean confusión frente a los enlaces para lo que hemos denominado como «acciones».