Foros del Web » Creando para Internet » CSS »

Degradado en CSS

Estas en el tema de Degradado en CSS en el foro de CSS en Foros del Web. Hola buenos dias... Me gustaria poner como fondo de mi pagina un degradado... He intentado hacerlo, pero lo unico que consigo es que el degrado ...
  #1 (permalink)  
Antiguo 24/05/2012, 07:37
 
Fecha de Ingreso: septiembre-2011
Ubicación: Caracas
Mensajes: 240
Antigüedad: 12 años, 5 meses
Puntos: 9
Degradado en CSS

Hola buenos dias... Me gustaria poner como fondo de mi pagina un degradado... He intentado hacerlo, pero lo unico que consigo es que el degrado se haga solamente en la mitad de la pagina y el navegador repite el degradado en la otra mitad... Yo lo que quiero es que me ocupe el espacio por completo... Si alguien puede echarme una mano... Muchas gracias
  #2 (permalink)  
Antiguo 24/05/2012, 11:24
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Degradado en CSS

¿Y que código, o cómo estas realizando esto?

Sin tú código no hay código de ayuda.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 24/05/2012, 12:13
 
Fecha de Ingreso: mayo-2012
Mensajes: 9
Antigüedad: 11 años, 10 meses
Puntos: 1
Respuesta: Degradado en CSS

Hola @dragonfire256 , vos te referís a la etiqueta <body> ?
Si es así te comento que vía CSS primero deberías declarar,

html,body{margin:0;padding:0; width:100%;height:100%;}

Esto va a generar que el degradé ocupe el 100% de la página.

Luego lo mejor sería utilizar algún standard de Degradé, como puede ser este, en este caso un ejemplo de gris claro a gris oscuro:

body{
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}

Para generar buenos colores y de una manera muy simple te recomiendo esta web: [URL="http://www.colorzilla.com/gradient-editor/"]http://www.colorzilla.com/gradient-editor/[/URL] Da soporte a Webkit, Opera, Mozilla y Microsoft.

Ojalá haya entendido tu pregunta.

Saludos.
  #4 (permalink)  
Antiguo 29/05/2012, 09:15
 
Fecha de Ingreso: septiembre-2011
Ubicación: Caracas
Mensajes: 240
Antigüedad: 12 años, 5 meses
Puntos: 9
Respuesta: Degradado en CSS

Cita:
Iniciado por AndresTaggify Ver Mensaje
Hola @dragonfire256 , vos te referís a la etiqueta <body> ?
Si es así te comento que vía CSS primero deberías declarar,

html,body{margin:0;padding:0; width:100%;height:100%;}

Esto va a generar que el degradé ocupe el 100% de la página.

Luego lo mejor sería utilizar algún standard de Degradé, como puede ser este, en este caso un ejemplo de gris claro a gris oscuro:

body{
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}

Para generar buenos colores y de una manera muy simple te recomiendo esta web: [URL="http://www.colorzilla.com/gradient-editor/"]http://www.colorzilla.com/gradient-editor/[/URL] Da soporte a Webkit, Opera, Mozilla y Microsoft.

Ojalá haya entendido tu pregunta.

Saludos.
Disculpa por tardarme tanto en responderte, pero estaba ocupado en otras cosas... A la final utilice este codigo:

Código CSS:
Ver original
  1. body{
  2.    height: 100%;
  3.    width: 100%;
  4.    background: -webkit-linear-gradient(#EE8711, #033E8D);
  5.    background: -moz-linear-gradient(#EE8711, #033E8D);
  6.    background: -o-linear-gradient(#EE8711, #033E8D);
  7.    background: -ms-linear-gradient(#EE8711, #033E8D);
  8.    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EE8711', endColorstr='#033E8D',GradientType=0 );
  9. }

Pero me gustaria que me explicaras tu codigo porque se ve mucho mas completo... Veo que utilizas porcentajes y utilizas palabras (top por ejemplo) para ubicar el degradado... Me parece interesante y me gustaria que me lo explicaras un poco mas... Muchas gracias por tu ayuda hermano
  #5 (permalink)  
Antiguo 29/05/2012, 14:27
Avatar de Simon_Echecopar  
Fecha de Ingreso: marzo-2012
Mensajes: 96
Antigüedad: 12 años
Puntos: 0
Respuesta: Degradado en CSS

Código:
   background: url(gradienteAzul.jpg) repeat-y scroll 0;
La imagen es una linea gradiente. Por si tienes ya la imagen

Etiquetas: degradado
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 14:28.