Crear menu css con degradado

[IMAC/]

Buenas

Tengo intención de crear un menú y de atreverme por primera vez a hacerlo con css en lugar de con tablas.
Y bueno, además creo que no empiezo por lo más fácil, pues el menú tiene un degradado y podrá variar de temaño según diferentes menús de la web, de manera que habrá unos más grandes y otros más pequeños, pero quiero que todos tengan degradado y si es posible que usen la misma imagen de fondo.

Basicamente quiero implementar esto en css:


Había pensado en cortar en 3 partes.

1- La parte supeiror con bordes redondeados siempre será la misma, de modo que esa sería una parte:


2- La parte inferior con bordos redondeados siempre será también la misma, de modo que esta sería otra parte.


3- Y la parte intermedia con degradado. (aunque tal vez aquí podáis corregirme y tal vez trabajando con el color base y aplicando otra imagen encima png... no se, ya me diréis vosotros que sois los expertos)



Bueno, la fila de otro color sería el color que tendría al pasar el ratón por encima, no forma parte de la imagen de fondo.

¿cómo me recomendáis tratar este menu? Lo digo porque es la primera vez que me meto en css y no ando muy seguro...

Gracias.

[kurroman]

Para empezar no tiene mala pinta, lo unico que te puede dar problemas es el degradado en funcion de la altura que tome la capa. ¿Que quieres saber exactamente?

Asi leyendote parece k tienes claro que tienes que tener 3 capas (top, content y bottom), el menú irá en la de content y deberias ponerlo como una lista desordenada (<ul>).

¿Algo mas?

[sanchy]

si los menus son pocos me parece q te ahorraria mucho trabajo si hicieras una imagen para cada menu

[IMAC/]

Iniciado por kurroman

Para empezar no tiene mala pinta, lo unico que te puede dar problemas es el degradado en funcion de la altura que tome la capa. ¿Que quieres saber exactamente?

Lo que me gustaría saber es qué opciones hay de que la imagen central, la que compone el cuerpo del menú, se adapte al alto cada menú.

No puedo hacer una imagen por menú porque los menús irán variando muchas veces y sería muy costoso.

Y bueno, si no existe esa opción, se me ha ocurrido otra que tampoco se si sería posible implementar.

Se trataría de coger un color de fondo base para todo el cuerpo del texto y encima, aplicar una imagen .png con degradado acabando en transparencia (esta la saco con photoshop en png 24) , de modo que actuaría de igual modo que un degradado.
La cuestión es que no se como aplicar una imagen encima de un color ni si es posible.

No se si me he explicado.

Gracias.

[kurroman]

A mi es que personalmente no me gusta emplear degradados en capas variables. De todas maneras, si tuviera que hacerlo haría:

- un degradado con algo menos de la altura minima que va a tener la tabla
- este degradado debe ir de un color al color de fondo de la capa (imagina de rojo a blanco ok?)
- tu imagen bottom (inferior) que tenga el color blanco de relleno.

Entonces en el css de la capa content:

#content {background: #fff url(tuimagen) top repeat-y}

De esa manera tendría degradado y si crece el menú crecería sin cortes.

[shurshok]

solo hay que arreglar una simple confusión

lo que se debe multiplicar es el eje X (o sea en horizontal) en vez de así:

#content {background: #fff url(tuimagen) top repeat-y}

seria así:

#content {background: #fff url(tuimagen) top repeat-x}

[kurroman]

Eso eso :)

La costumbre de hacer siempre los background con el repeat-y.

Perdon por el despiste.

[shurshok]

jajajaja, cuando vi tu mensaje pensé que era para discutirme algo jajajaja (muchas veces discutí por errores míos y de otros jajajaja)

y bueno, otra recomendación, hace el degradado de 1px de ancho, asi va a ser mas ligera tu pagina

[IMAC/]

Gracias kurroman, es otra posibilidad, aunque no la ideal.

El degradado es muy importante en el menú pricipal y bueno, los demás menús son bastante más pequeños y si quiero hacer que quede bien en todos tendría que escojer una imagen de degradado pequeña, con lo cual en el grande ya no queda como debería.

Pero bueno, tal vez pruebe a hacerlo así usando 2 fondos de degradado. Uno para el menú principal y el resto para menús más pequeños.

Gracias.

[shurshok]

IMAC, no se si leíste todo el hilo, pero Kurroman tuvo un pequeño error, intenta de la manera que expuse yo.

[IMAC/]

Iniciado por shurshok

IMAC, no se si leíste todo el hilo, pero Kurroman tuvo un pequeño error, intenta de la manera que expuse yo.

Si, si te refieres a lo de multiplicar la imagen en el eje de las x y no de las Ys.
De todos modos el problema persiste. La cuestión esa imagen que se repite es de un tamaño fijo y no varía de dimensión Y cuando lo hace el menú.

[shurshok]

pero si agrandas el menú de forma horizontal, se seguirá viendo el degradado, y si agrandas el menú de forma vertical, el degradado seguirá del mismo tamaño, pero se alargara el color final, es un efecto sencillo pero muy bueno.

Img de ejemplo posteada por kurroman: