Foros del Web » Creando para Internet » CSS »

Crear menu css con degradado

Estas en el tema de Crear menu css con degradado en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/11/2008, 05:50
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Crear menu css con degradado

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.
  #2 (permalink)  
Antiguo 23/11/2008, 10:26
 
Fecha de Ingreso: junio-2004
Mensajes: 266
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: Crear menu css con degradado

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?
__________________
WebSenior
  #3 (permalink)  
Antiguo 23/11/2008, 10:53
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Crear menu css con degradado

si los menus son pocos me parece q te ahorraria mucho trabajo si hicieras una imagen para cada menu
  #4 (permalink)  
Antiguo 23/11/2008, 11:09
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Respuesta: Crear menu css con degradado

Cita:
Iniciado por kurroman Ver Mensaje
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.
  #5 (permalink)  
Antiguo 23/11/2008, 11:26
 
Fecha de Ingreso: junio-2004
Mensajes: 266
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: Crear menu css con degradado

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.


__________________
WebSenior
  #6 (permalink)  
Antiguo 23/11/2008, 11:35
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Crear menu css con degradado

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}
__________________
Visita la mejor web: http://infoadictos.net
  #7 (permalink)  
Antiguo 23/11/2008, 11:55
 
Fecha de Ingreso: junio-2004
Mensajes: 266
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: Crear menu css con degradado

Eso eso :)

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

Perdon por el despiste.
__________________
WebSenior
  #8 (permalink)  
Antiguo 23/11/2008, 11:59
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Crear menu css con degradado

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
__________________
Visita la mejor web: http://infoadictos.net
  #9 (permalink)  
Antiguo 23/11/2008, 12:14
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Crear menu css con degradado

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.
  #10 (permalink)  
Antiguo 23/11/2008, 12:21
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Crear menu css con degradado

IMAC, no se si leíste todo el hilo, pero Kurroman tuvo un pequeño error, intenta de la manera que expuse yo.
__________________
Visita la mejor web: http://infoadictos.net
  #11 (permalink)  
Antiguo 23/11/2008, 12:25
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Crear menu css con degradado

Cita:
Iniciado por shurshok Ver Mensaje
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ú.
  #12 (permalink)  
Antiguo 23/11/2008, 12:30
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Crear menu css con degradado

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:

__________________
Visita la mejor web: http://infoadictos.net
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:53.