Fireworks - Crear imagen para dividir menu web

Hola gente!

Me encuentro en el intento de crear un menu para una web y quisiera saber cómo hacer una imagen semejante a esta:

http://secondpicture.com/tutorials/web_design/navi_bg_divider.png

En esa misma web se muestra cómo hacer el menu, que queda realmente bien a mi modo de ver, pero no estoy seguro de cómo hacer la imagen divisoria.

¿Es mitad color solido y mitad degradado?

Gracias de antemano y saludos.

Es un degradado, solo traza un rectángulo de 2 x 80 px y aplica el relleno. No tiene mayor complicación. Saludos.

pki | ssl | certificado de seguridad | certificado digital | cfdi

Hola y gracias por responder DerangedMX,

Es posible que sean dos rectángulos, uno con cada degradado? Y que estén unidos de alguna manera? Gracias y saludos. (El mensaje anterior se me cortó mientras lo escribía)

Hola Nathan,

entré a la web de second picture para ver el menú. Por lo que veo ellos generan un sprite para el botón. Si buscas hacer un menú similar puedes lograrlo de una forma más sencilla, para estos casos suelo hacer la imagen para el menú y aplicar estilos CSS para resolver las divisiones con un efecto óptico. Dame oportunidad para hacer un ejemplo y subirlo.

Estamos en contacto.

pki | ssl | certificado de seguridad | certificado digital | cfdi

Hola DerangedMX,

Yo encantado si puedes hacer un ejemplo para poder seguirlo. Seguramente me será de ayuda a mi y quien venga detrás. Lo de usar CSS no se me ocure cómo se hace, asi que todo tuyo.

Muchas gracias por tu ayuda.

Saludos Nathan.

subí el ejemplo en el siguiente enlace, viene un vínculo para descargar el ejemplo del menu. Espero te sea de utilidad.

pki | ssl | certificado de seguridad | certificado digital | cfdi

menudo asunto... no coloque el url, una disculpa.

http://wir.mx/aportes/


pki | ssl | certificado de seguridad | certificado digital | cfdi

DerangedMX,

Te ha quedado genial, muy bueno la verdad. Ahora realizaré las grandes manifestaciones de mi ignorancia:

a) Cómo has creado la imagen? Más que nada, quisiera saber qué efecto utilizas en el color azul (no es un degradado, verdad?), y cómo haces esa separación entre los rectángulos, que parece una hendidura entre medio de los dos.

b) Viendo el código CSS, puedo apreciar que al hacer el hover se muestra la "parte derecha" de la imagen, la que contiene el rectángulo más claro. Sin embargo, no logro ver cómo haces para que la imagen por defecto sea la "parte izquierda" de btn.png.

Gracias nuevamente por tu ayuda y por tu tiempo,

Saludos.

Saludos Nathan,

respondiendo a tus dudas:

a) para el caso copié la imagen desde la fuente para efecto de explicarlo. Analizándola puedo comentarte que la puedes conseguir con un degradado y un rectángulo con una transparencia, el borde es parte de la misma imagen. Anexo un archivo de ejemplo para que veas el método.

b) el hover se logra por medio de la misma imagen por medio de un sprite y la propiedad "background-position:valor-horizontal valor_vertical;". Haré una explicación detallada sobre el tema en otro post.

No hay que agradecer, si no preguntamos no aprendemos. Saludos.

certificado de seguridad | certificado digital | cfdi | timbre fiscal | ssl | ¿qué es ssl?

Genial, muchas gracias DerangedMX y saludos!