Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Gradiente Radial CSS3

Estas en el tema de Gradiente Radial CSS3 en el foro de CSS en Foros del Web. Buenas tardes. Tengo un problema y estoy harto de probar y nada xD así que acudo a los sabios. Simplemente quiero poner de fondo en ...
  #1 (permalink)  
Antiguo 20/01/2014, 10:31
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Gradiente Radial CSS3

Buenas tardes.
Tengo un problema y estoy harto de probar y nada xD así que acudo a los sabios.

Simplemente quiero poner de fondo en mi web un gradiente radial (color1 y color2) pero que este NO se vaya repitiendo. Sino que el gradiente de fondo ocupe siempre la totalidad del browser ya sea smartphone tablet, o desktop

entrando en Can i use [URL="http://caniuse.com/#feat=css-gradients"]http://caniuse.com/#feat=css-gradients[/URL] veo que ya simplemente necesito el webkit para adaptarlo.

así que uso
Código:
body {
background: @basecolor; /* Navegadores viejos */
background: webkit-radial-gradient(@sbasecolor 0%, @basecolor 100%);  /*Webkit*/
background: radial-gradient(@sbasecolor 0%, @basecolor 100%); /* W3C */
}
Bien ahora simplemente necesito que alguien me ayude y me diga como hacer para que se expanda el degradado siempre al browser y se adapte. (seguro que es una tontería pero saturadísimo ya no doy para más .

Gracias de antemano
  #2 (permalink)  
Antiguo 20/01/2014, 12:49
Avatar de paxarin  
Fecha de Ingreso: enero-2010
Ubicación: Santander
Mensajes: 413
Antigüedad: 14 años, 2 meses
Puntos: 6
Respuesta: Gradiente Radial CSS3

Probaste poniendo:
width: 100%;
height: 100% o lo que necesites.
__________________
http://www.paxarindesign.es
  #3 (permalink)  
Antiguo 20/01/2014, 12:54
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Respuesta: Gradiente Radial CSS3

Lo tengo puesto y nada, he probado con esto

background: radial-gradient(farthest-corner, @sbasecolor 0%, @basecolor 100%)

Y queda algo mejor ( ahora solo tengo 3 repeticiones en vez de 10) pero nada no consigo fijarlo al browser.
  #4 (permalink)  
Antiguo 20/01/2014, 14:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Gradiente Radial CSS3

Supongo que paxarin se refiere al elemento que contiene el degradado. Debe de tener un altura definida, al igual que <html>.
  #5 (permalink)  
Antiguo 20/01/2014, 15:21
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Respuesta: Gradiente Radial CSS3

Cita:
Iniciado por pzin Ver Mensaje
Supongo que paxarin se refiere al elemento que contiene el degradado. Debe de tener un altura definida, al igual que <html>.
Hola, si quiero que sea el fondo de todo, lo tengo en el body y a este le he dado un ancho y alto del 100% pero el degradado se repite
  #6 (permalink)  
Antiguo 20/01/2014, 15:38
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 21 años, 4 meses
Puntos: 11
Respuesta: Gradiente Radial CSS3

Aquí tienes un ejemplo que se te adapta a la ventana.

Código:
body {
background: #000000; /* fallback for non-supporting browsers */  
    background-image: -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple)); /* old WebKit Syntax */  
    background-image: -webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%); /* New WebKit syntax */  
    background-image: -moz-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%);  
    background-image: -ms-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%); /* IE10+ */  
    background-image: -o-radial-gradient(center center, circle contain, black 0%, blue 25%, green 40%, red 60%, purple 80%, white 100%); /* Opera (13?) */  
}
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #7 (permalink)  
Antiguo 20/01/2014, 18:56
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 10 años, 10 meses
Puntos: 31
Respuesta: Gradiente Radial CSS3

Tienes que tener el alto 100% en el elemento html, como te ha dicho pzin
Código CSS:
Ver original
  1. html {height: 100%; }
  #8 (permalink)  
Antiguo 21/01/2014, 03:40
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Respuesta: Gradiente Radial CSS3

Cita:
Iniciado por alzacon Ver Mensaje
Tienes que tener el alto 100% en el elemento html, como te ha dicho pzin
Código CSS:
Ver original
  1. html {height: 100%; }
Muchas gracias a todos, con esto lo he agregado, pero y lo siento por mi ignorancia.
Porque debo aplicar el height 100% al html si el gradient lo estoy aplicando al <body> ??, para poder comprenderlo bien
  #9 (permalink)  
Antiguo 21/01/2014, 04:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Gradiente Radial CSS3

Cita:
Iniciado por TibicenasDesign Ver Mensaje
Muchas gracias a todos, con esto lo he agregado, pero y lo siento por mi ignorancia.
Porque debo aplicar el height 100% al html si el gradient lo estoy aplicando al <body> ??, para poder comprenderlo bien
Porque todos los elementos tienen por defecto una altura automática, lo que quiere decir que la altura depende de su contenido. Si body mide 100%, se refiere al 100% de su elemento contenedor, que por defecto, tiene una altura automática.
  #10 (permalink)  
Antiguo 21/01/2014, 04:54
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Respuesta: Gradiente Radial CSS3

Cita:
Iniciado por pzin Ver Mensaje
Porque todos los elementos tienen por defecto una altura automática, lo que quiere decir que la altura depende de su contenido. Si body mide 100%, se refiere al 100% de su elemento contenedor, que por defecto, tiene una altura automática.
Entonces sería recomendable tener un height: 100%; en mi reset correcto ?
  #11 (permalink)  
Antiguo 21/01/2014, 05:01
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Gradiente Radial CSS3

Cita:
Iniciado por TibicenasDesign Ver Mensaje
Entonces sería recomendable tener un height: 100%; en mi reset correcto ?
No entiendo porqué. Todos los elementos tienen asignados por defectos ciertos valores, muchos de ellos son automáticos o heredados. Si te hace falta le asignas una altura y sino, pues no, pero no sé qué tiene que ver con un reset.

Etiquetas: repeticion, size
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:22.