Foros del Web » Creando para Internet » CSS »

fondo degradado

Estas en el tema de fondo degradado en el foro de CSS en Foros del Web. Intento hacer un fondo degradado, he leido mucho pero no me aclaro de como hacerlo para que ocupe toda la pantalla. No se si se ...
  #1 (permalink)  
Antiguo 02/04/2008, 12:42
Avatar de wolfmoon  
Fecha de Ingreso: octubre-2007
Mensajes: 189
Antigüedad: 10 años, 1 mes
Puntos: 2
fondo degradado

Intento hacer un fondo degradado, he leido mucho pero no me aclaro de como hacerlo para que ocupe toda la pantalla. No se si se puede hacer solamente con css, porque tambien lei que hay que hacerlo con php, no se, haber si me podeis explicar porque....
  #2 (permalink)  
Antiguo 02/04/2008, 13:56
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: fondo degradado

Hola wolfmoon

La mejor maner que tienes de hacer un fondo degradado (suponiendo que quieres que se degrade de arriba a abajo), es hacer un gif de 1px de ancho y la altura necesaria (por ejemplo 500px).

El gif empezara desde arriba y tienes que tener en cuenta que color tendria en el borde inferio, para poner ese mismo color en el background.

Una vez que tengas el gif, tienes que poner el siguiente codigo css:

Código:
body{
	border: 0px;
	margin: 0px;
	background-color:#000000; /*el color tiene que ser el del borde inferior del gif*/
	background-image:url(fondo.gif);
	background-position:top;
	background-repeat:repeat-x;
}

Si quisieras un degradado lateral, tendrias que hacer un gif de 1px de alto y la anchura necesaria (por ejemplo 600px).

Si el gif empezara desde la izquierda tienes que tener en cuenta que color tendria en el borde derecho, y si empezara desde la derecha el color del brde izquierdo, para poner ese mismo color en el background.

Una vez que tengas el gif, tienes que poner el siguiente codigo css:

Código:
body{
	border: 0px;
	margin: 0px;
	background-color:#000000; /*el color tiene que ser el del borde derecho o izquierdo del gif*/
	background-image:url(../img/fondo.gif);
	background-position:right; /*o left*/
	background-repeat:repeat-y;
}
Puedes ver un ejemplo en mi pagina: www.arriaka.com

Saludos!
  #3 (permalink)  
Antiguo 03/04/2008, 18:29
Avatar de wolfmoon  
Fecha de Ingreso: octubre-2007
Mensajes: 189
Antigüedad: 10 años, 1 mes
Puntos: 2
Re: fondo degradado

ok, todo claro.
Gracias
  #4 (permalink)  
Antiguo 04/04/2008, 11:04
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: fondo degradado

¿Hay alguna forma de hacer esto de forma dinámica para que ocupe todo el alto o largo de la pantalla independientemente del tamaño de esta?
  #5 (permalink)  
Antiguo 04/04/2008, 16:15
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Re: fondo degradado

Una opción más!

Código:
body{
	border: 0px;
	margin: 0px;
	background : #000 url('fondo.gif') repeat-x top left;
}
o bien..
Código:
body{
	border: 0px;
	margin: 0px;
	background : #000 url('fondo.gif') repeat-x fixed top left;
}
Lo de FIXED es para que al hacer scroll el fondo se quede en su lugar.
Sldssssss,
__________________
_______
Jorge Rojas.
  #6 (permalink)  
Antiguo 04/04/2008, 16:20
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Re: fondo degradado

Cita:
Iniciado por daPhyre Ver Mensaje
¿Hay alguna forma de hacer esto de forma dinámica para que ocupe todo el alto o largo de la pantalla independientemente del tamaño de esta?
Creo que lo que quieres es que el fondo se repita en (x) y (y) al mismo tiempo no?
pues si es eso basta con que le quites repeat-x, te quedaría asi..

Código:
body{
	border: 0px;
	margin: 0px;
	background : #000 url('fondo.gif') top left;
}
__________________
_______
Jorge Rojas.
  #7 (permalink)  
Antiguo 05/04/2008, 22:49
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: fondo degradado

Cita:
Iniciado por iconogt Ver Mensaje
Creo que lo que quieres es que el fondo se repita en (x) y (y) al mismo tiempo no?
No, lo que quiero es que, por ejemplo, que una página sea degradada desde arriba con un color azul, y que baje hasta quedar en color blanco, pero que este efecto aparesca sin importar si el usuario que la ve tenga una resolución de 640x480 o 1280x1024. ¿Es esto posible? ¿Cómo podría hacerlo?
  #8 (permalink)  
Antiguo 06/04/2008, 01:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: fondo degradado

Hola:

Los fondos degradados solo se pueden conseguir con un fichero gráfico repitiéndose en el sentido que quieras, pero el fichero es estático. La única forma de se estire o achique es ayudándote de otros lenguajes.
Si dispones de php y javascript puedes usar eltruco que explico en esta página: Gradientes.
También hice una aplicación online: Gradientes (php + librerías GD)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 06/04/2008, 20:47
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: fondo degradado

¡Gracias por la solución! Cre que es justo lo que buscaba.

Lo intentaré pronto a ver si me resulta. Gracias de nuevo.
  #10 (permalink)  
Antiguo 04/07/2008, 16:26
 
Fecha de Ingreso: julio-2008
Mensajes: 4
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: fondo degradado

Hola a todos. Primero que nada saludos, dado que soy nuevo en el foro. Es un placer pertenecer a un grupo como este. Me gustaria preguntar sobre este tema que estan hablando, y que he entendido mas o menos como hacerlo, pero no se muy bien si me va a resultar. La verdad es que me gustaria conseguir el efecto del fondo tal y como lo tienen en la web http://www.serveisweb.com/.

Gracias por adelantado.

Saludos.
  #11 (permalink)  
Antiguo 05/07/2008, 00:46
 
Fecha de Ingreso: septiembre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: fondo degradado

hola ansina, lo que ves en la página se puede hacer con 3 divs, el primero tiene un degradado el segundo solo el color de fondo, puede ser un gif o con cógigo. ademas de que puede ser el fondo de toda la página y el tercer div, es decir el de abajo tiene un gif con el mismo degradado que el de arriba pero en sentido contrario o bien girado 180 grados.

Pero lo que creo que usan en ese sitio es un cms talvez jommla o algo similar. pero básicamente aplican lo mismo que te explique arriba.
__________________
Mientras mas aprendo, me doy cuenta que es más lo que ignoro.
  #12 (permalink)  
Antiguo 05/07/2008, 17:02
 
Fecha de Ingreso: julio-2008
Mensajes: 4
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: fondo degradado

Hola de nuevo. He pensado en lo que me dices de los tres divs. En principio estoy un poco verde en css, igual te pregunto tonterias. Fijandome en el efecto conseguido en esta página, veras que la imagen que usan en la parte superior es la misma que la parte inferior(digo la misma si la descargas). Eso indica que la giran con el codigo, ¿como?. Y despues cuando la pagina crece, o sea las capas son mas grandes solo meten la imagen que usan de degradado arriba y abajo, lo demas lo dejan del color del fondo, o como tu dices con un tercer div. ¿Como lo hacen?, tienes algun ejemplo de como girar o por donde buscar??,

Millon de gracias por adelantado desde Canarias.

Saludos.
  #13 (permalink)  
Antiguo 05/07/2008, 19:47
 
Fecha de Ingreso: septiembre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: fondo degradado

Hola denuevo ansina, mira esta pagina www.amuch.org tiene el mismo efecto y parece ser la misma imagen pero son dos diferentes. YO modifique la plantilla que se usó por eso lo sé, la programación php logra eso pero repito son dos imagenes diferentes. Está hecho con un manejador de contenidos.

pero si la haces completamente con código desde cero la solución que yo usaria es la de los 3 divs.

Saludos.
__________________
Mientras mas aprendo, me doy cuenta que es más lo que ignoro.
  #14 (permalink)  
Antiguo 07/07/2008, 17:03
 
Fecha de Ingreso: julio-2008
Mensajes: 4
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: fondo degradado

Hola otra vez amigo Xaguar. Sigo pensando en todo lo que me cuentas, y no veo la solucion sencilla. Te voy a dar otra pagina de ejemplo de lo que me gustaria controlar. Fijate en esta web http://www.csszengarden.com/tr/espanol/.
Si la miras, la imagen superior izquierda, se llama igual que la inferior derecha. Como siendo la misma imagen, esta en la misma pagina, de dos formas distintas??. ES parecido al caso que te comentaba la web de http://www.serveisweb.com/, como siendo la misma imagen, la giran en la misma pagina??. Como se hace el giro, rotacion o lo que sea de la imagen??.

Estoy un poco perdido.

Gracias
  #15 (permalink)  
Antiguo 07/07/2008, 17:16
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: fondo degradado

Fijate bien. Si descargas las imagenes, verás que la de la esquina superior izquierda no es el fondo, si no un div encima de este con esa imagen. Si le das "descargar fondo", solo descargas el fondo de la página, que sería la de la esquina inferior derecha.

Para el segundo caso, es lo mismo, la imagen que descargas es "fondo_up". El fondo inferior está por aparte. Espero esto te sirva de ayuda. Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #16 (permalink)  
Antiguo 14/07/2008, 01:46
 
Fecha de Ingreso: septiembre-2005
Mensajes: 63
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: fondo degradado

Hola ansina, disculpame por no haber respondido antes. Tuve que dar un curso fuera de la ciudad y no pude conectam en la semana pasada.

Lo que dice daPhyre es corecto. Es diferente la imagen de fondo de la web y la imagen de fondo de los div que hay en ella, cuando tu guardas la imagen de fondo con el navegador no es la imagen del div. sino la imagen de la web (el body por ejemplo).

Te ecomiendo hacer esta prueba, espero que te de una mejor perspectiva. Descarga el navegador firefox e instalalo, si no lo tienes instalado. De la web del navegador mozilla.com, descarga el agregado web developer. Una vez que lo tengas abre la pagina que mencionas:
http://www.csszengarden.com/tr/espanol/
y en la barra webdeveloper opime el boton "images" despues "Outline Images" y posteriormente "Background Images".

Esto pondrá un borde rojo en las imagenes que están como fondo en el body de la web y en los divs. Y si te colocas sobre la imagen y con el boton derecho del ratón seleccionas ver imagen de fondo verás que son imagenes diferentes. Esto por supuesto con el navegado firefox.

Recuerda que cuando diseñamos una web debemos probarlo polomenos en media docena de navegadores, ya sean de PC con windows, mac, linux, etc. Por ejemplo en mi caso si solo tengo windows a la mano, hago pruebas con Firefox, Opera, Safari e Internet Explorer.

Pero en resumen no es la misma imagen y no la rotan con código en los casos que me dices.

La segunda web que dices parece estar hecha con Joomla o Mambo, pero siguen siendo imagenes diferentes. Digamos que es como una ilusión óptica lo que hace parecer que se rota la imagen.

Prueba y me cuentas tus conclusiones.

Saludos Amigo ansina.
__________________
Mientras mas aprendo, me doy cuenta que es más lo que ignoro.
  #17 (permalink)  
Antiguo 15/07/2008, 06:02
 
Fecha de Ingreso: julio-2008
Mensajes: 4
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: fondo degradado

Hola amigo Xaguar. He estado analizando con detetimiento todo el tema, y tengo claro como llegan a este tipo de resultado, piniendo una imagen para el body, y los demas, con fondos superpuestos para los divs. En estos casos no tengo duda. Despues de ver varios ejemplos, he intentado hacer lo de la gente de http://www.serveisweb.com/, y no lo he conseguido con capas. Seguramente, como me comentavais mas atras, estara gestionado con un cms. En cualquier caso mil gracias, y he estoy aprendiendo un monton sobre este tema de los fondos.
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 04:29.