Foros del Web » Creando para Internet » HTML »

Degradado lineal de fondo en html

Estas en el tema de Degradado lineal de fondo en html en el foro de HTML en Foros del Web. Hola Hay alguna forma de hacer un degradado lineal en el fondo de una web con HTML. Sin ser php por favor no tengo ni ...
  #1 (permalink)  
Antiguo 19/07/2005, 17:44
Avatar de RitaBbaa  
Fecha de Ingreso: junio-2004
Ubicación: Islas Canarias. España.
Mensajes: 1.191
Antigüedad: 13 años, 6 meses
Puntos: 8
Degradado lineal de fondo en html

Hola

Hay alguna forma de hacer un degradado lineal en el fondo de una web con HTML. Sin ser php por favor no tengo ni la menor idea de como trabajar con eso.

saludos.
__________________
La vida es bella.
  #2 (permalink)  
Antiguo 19/07/2005, 17:49
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola Luisa_114, te refieres a un degradado hecho desde Photoshop y luego meterlo como fondo en html?

Por si es eso te dejo un ejemplo:

Código HTML:
<style type="text/css">
body {
	background-image: url(tufondodegradado.gif);
}
</style> 
Saludosss
  #3 (permalink)  
Antiguo 19/07/2005, 17:58
Avatar de RitaBbaa  
Fecha de Ingreso: junio-2004
Ubicación: Islas Canarias. España.
Mensajes: 1.191
Antigüedad: 13 años, 6 meses
Puntos: 8
Que rápido

Pues me referia a si se puede hacer un degradado lineal usando el código, sin necesidad de imagen. Eso se puede?

saludos
__________________
La vida es bella.
  #4 (permalink)  
Antiguo 19/07/2005, 18:31
Avatar de Klon22
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: México DF- La Cd + Poblad
Mensajes: 2.052
Antigüedad: 13 años, 2 meses
Puntos: 5
NO es posible en lenguajes como el html, pero lo que yo haría sería una tira de imagen de el alto de la web por un ancho de 5 px con esto lograrías que no pesará casí nada.
Me expliqué?
de todas maneras seguro que recibirás mas comentarios-
Salduos
__________________
Hosting|
Protege a tu hijos - mira este documental Recomendado!
  #5 (permalink)  
Antiguo 19/07/2005, 18:32
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Uhm, creo que se puede hacer con Javascript, pero creeme, es mejor hacer una imagen de 1 pixel de ancho y los que necesites de alto. Porque la imagen no va a ocupar practicamente nada y si el visitante tiene desactivado el javascript (por seguridad) va a ver el degradado igual.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #6 (permalink)  
Antiguo 19/07/2005, 21:00
Avatar de RitaBbaa  
Fecha de Ingreso: junio-2004
Ubicación: Islas Canarias. España.
Mensajes: 1.191
Antigüedad: 13 años, 6 meses
Puntos: 8
mmmm el tema de las imagenes es que depende, cuando se utilizan en un fondo y la resolución es muy grande se repite, y queda muy feo. Podría quedar como cortada y en la parte de abajo volver a empezar el degradado otra vez.

Me gustaría obtener ese javascript y ver lo que puedo hacer con él, en caso de que no me cuadre la cosa entonces pensaria que hacer con la opción de imagen.

Muchas Gracias.
__________________
La vida es bella.
  #7 (permalink)  
Antiguo 19/07/2005, 21:13
 
Fecha de Ingreso: enero-2005
Mensajes: 188
Antigüedad: 12 años, 10 meses
Puntos: 0
Cita:
Iniciado por Luisa_114
mmmm el tema de las imagenes es que depende, cuando se utilizan en un fondo y la resolución es muy grande se repite, y queda muy feo.
Para que sólo se repita en sentido horizontal:
Código HTML:
<style type="text/css">
body {
  background-image: url("tufondodegradado.gif");
  background-color: #FFFFFF;
  background-repeat: repeat-x;
}
</style> 
Si quieres que cubra toda la altura de la página, házlo de, por ejemplo, 5 píxeles de ancho y 4000 píxeles de alto (o los que necesites). En el color de fondo (background-color) le pones el mismo color en que acabe el degradado, para que si, a pesar de todo, la página sobrepasa los 4000 píxeles de alto, no quede el color "cortado". Yo lo haría así, pasando de javascript.
  #8 (permalink)  
Antiguo 20/07/2005, 02:24
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola Luisa_114:

En las FAQs javascript puse un código que vale sin imágenes...http://www.forosdelweb.com/showpost....&postcount=129

Si dispones de php y librerias GD 2.0 puedes ver puedes ver el código de este mensaje: http://www.forosdelweb.com/showthrea...ght=gradientes

y ver el resultado en esta página: http://www.caricatos.net/inicio.html

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 20/07/2005, 13:36
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Lo que te dice inforsol es mas que suficiente, tu eliges con css si la imagen se repite en vertical, en horizontal o que no se repita, ademas una imagen asi ocupa muy poco y hasta puedes ponerle otros efectos.
  #10 (permalink)  
Antiguo 20/07/2005, 15:56
Avatar de RitaBbaa  
Fecha de Ingreso: junio-2004
Ubicación: Islas Canarias. España.
Mensajes: 1.191
Antigüedad: 13 años, 6 meses
Puntos: 8
Muy buenas las formas de hacerlo, era lo que me hacia falta. Muchas gracias, saludinessssss
__________________
La vida es bella.
  #11 (permalink)  
Antiguo 21/12/2010, 13:49
 
Fecha de Ingreso: diciembre-2010
Mensajes: 1
Antigüedad: 7 años
Puntos: 0
Respuesta: Degradado lineal de fondo en html

como q llegue tarde a la pregunta
pero aki esta la solucion para los q andan buscando todavia
<div style="color: white; padding: 12px; background: -moz-linear-gradient(center top , rgb(59, 103, 158) 0%, rgb(43, 136, 217) 50%, rgb(32, 124, 202) 51%, rgb(125, 185, 232) 100%)
;">Pollobolo</div>
  #12 (permalink)  
Antiguo 27/12/2010, 07:03
 
Fecha de Ingreso: marzo-2006
Mensajes: 66
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Degradado lineal de fondo en html

Cita:
Iniciado por pollobolo Ver Mensaje
como q llegue tarde a la pregunta
pero aki esta la solucion para los q andan buscando todavia
<div style="color: white; padding: 12px; background: -moz-linear-gradient(center top , rgb(59, 103, 158) 0%, rgb(43, 136, 217) 50%, rgb(32, 124, 202) 51%, rgb(125, 185, 232) 100%)
;">Pollobolo</div>
no me funcionó este método cumpa :(
  #13 (permalink)  
Antiguo 04/02/2011, 08:37
 
Fecha de Ingreso: marzo-2009
Mensajes: 9
Antigüedad: 8 años, 9 meses
Puntos: 0
De acuerdo Respuesta: Degradado lineal de fondo en html

Cita:
Iniciado por Yarriot Ver Mensaje
no me funcionó este método cumpa :(

Segun lo probe con tres navegadores, solo funcionó con mozilla; Para chrome y explorer no me funciona, creo q es mejor hacerlo con la imagen como explica Inforsol
  #14 (permalink)  
Antiguo 04/02/2011, 08:45
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Degradado lineal de fondo en html

Cita:
Iniciado por pollobolo
como q llegue tarde a la pregunta
pero aki esta la solucion para los q andan buscando todavia
<div style="color: white; padding: 12px; background: -moz-linear-gradient(center top , rgb(59, 103, 158) 0%, rgb(43, 136, 217) 50%, rgb(32, 124, 202) 51%, rgb(125, 185, 232) 100%)
;">Pollobolo</div>
Logicamente, solo va a funcionar en mozilla firefox.
Cita:
-moz-linear-gradient(center top , rgb(59, 103, 158) 0%, rgb(43, 136, 217) 50%, rgb(32, 124, 202) 51%, rgb(125, 185, 232) 100%)
__________________________________________________ _______________________

Cita:
Iniciado por luisa_114
cuando se utilizan en un fondo y la resolución es muy grande se repite, y queda muy feo.
Y yo concuerdo con otros compañeros, con la imagen de 1px, es más que suficiente, con una imagen de 1px, no se notara la diferencia que se repita en x o y (depende como este la imagen).

Otra cosa, si no quereis que se repita y abarque el 100% de la pantalla, sin que se repita si es mas grande el monitor, puedes hacer poniendo la imagen con el tag <img> al principio de tu body y con estilos CSS agregas esto.
hay muchas maneras, no veo por que usar javascript.
__________________
Diseñador y Desarrollador web :)
  #15 (permalink)  
Antiguo 06/02/2011, 19:54
 
Fecha de Ingreso: junio-2010
Ubicación: Detrás de mi pantalla
Mensajes: 137
Antigüedad: 7 años, 6 meses
Puntos: 20
Respuesta: Degradado lineal de fondo en html

Prueba con este codigo, espero que te sirva! :)

<style type="text/css">
body {

background-image: url(''tuimágen.jpeg'');
background-repeat: no-repeat;
background-attachment: fixed
}
</style>
  #16 (permalink)  
Antiguo 22/04/2012, 14:43
 
Fecha de Ingreso: noviembre-2010
Ubicación: Guatavita (Cundinamarca) - Colombia
Mensajes: 3
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Degradado lineal de fondo en html

Esta última opcion es la ideal si quieres trabajar con una imagen como tal osea una foto, una imagen completa, porque el contenido de la pagina se mueve pero el fondo queda estatico, y si lo haces con la tecnica de generar una linea de imagen degradad de 1 px o 2px según el diseño del degradado como ya lo han planteado pues te resulta aun mejor, porque a la fija nunca se va a ver en ninguna resolución algún descache. Cuando buscas hacer diseños web funcionales porsupuesto que siempre se planteara hacer lo maximo posible en codigo , pero hay exepciones, pues el html solo no lo hace(esto lo lee todo navegador por supuesto) pero los demas lenguajes pueden estar desabilitados y hay es cuando todo lo trabajado se hecha a perder por querer ser tan especialista. Es mejor aprender a manejar las medias.
  #17 (permalink)  
Antiguo 28/11/2012, 10:01
 
Fecha de Ingreso: noviembre-2012
Mensajes: 1
Antigüedad: 5 años
Puntos: 0
Respuesta: Degradado lineal de fondo en html

aquí te dejo esto inténtalo es para diferentes navegadores


background: -moz-linear-gradient(white,green);
background: -webkit-linear-gradient(white,green);
background: -o-linear-gradient(white,green);
background: -ms-linear-gradient(white,green);
background: linear-gradient(white,green);
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 17:05.