[SOLUCIONADO] Gradiente Radial CSS3

TibicenasDesign · #1 (**permalink**) 20/01/2014, 10:31

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

paxarin · #2 (**permalink**) 20/01/2014, 12:49

Probaste poniendo:
width: 100%;
height: 100% o lo que necesites.

TibicenasDesign · #3 (**permalink**) 20/01/2014, 12:54

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.

pzin · #4 (**permalink**) 20/01/2014, 14:53

Supongo que paxarin se refiere al elemento que contiene el degradado. Debe de tener un altura definida, al igual que <html>.

TibicenasDesign · #5 (**permalink**) 20/01/2014, 15:21

Cita:

Iniciado por pzin

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

mdk · #6 (**permalink**) 20/01/2014, 15:38

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?) */  
}

alzacon · #7 (**permalink**) 20/01/2014, 18:56

Tienes que tener el alto 100% en el elemento html, como te ha dicho pzin

Código CSS:

Ver originalhtml {height: 100%; }

TibicenasDesign · #8 (**permalink**) 21/01/2014, 03:40

Cita:

Iniciado por alzacon

Tienes que tener el alto 100% en el elemento html, como te ha dicho pzin

Código CSS:

Ver originalhtml {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

pzin · #9 (**permalink**) 21/01/2014, 04:28

Cita:

Iniciado por TibicenasDesign

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.

TibicenasDesign · #10 (**permalink**) 21/01/2014, 04:54

Cita:

Iniciado por pzin

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 ?

pzin · #11 (**permalink**) 21/01/2014, 05:01

Cita:

Iniciado por TibicenasDesign

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.