1

Tengo esta linea

-webkit-linear-gradient(-20deg, #F15A24 87%, transparent 13%);

Funciona bien!!

Pero cuando intento con mas valores lo hace mal

-webkit-linear-gradient(49deg, #575757 52px, #f6f6f6 39px, #092432 429px, #736357 173px, #727272 172px, #FFFFFF 491px, #FFFFFF 530px, #092432 480px, #FFFFFF 50px, #E6E6E6 252px, #092432 1075px);

También ya intente con porcentajes

-webkit-linear-gradient(49deg, #575757 1.38925995191%, #f6f6f6 1.04194496393%, #092432 11.4613946033%, #736357 4.62196099386%, #727272 4.59524445632%, #FFFFFF 13.1178199305%, #FFFFFF 14.1597648945%, #092432 12.8239380176%, #FFFFFF 1.33582687684%, #E6E6E6 6.73256745926%, #092432 28.720277852%);

El resultado sigue siendo el mismo.

¿Como puedo lograr esto con CSS o JQuery?

La idea es pintar body de distintos colores del tamaño de los elementos que tengo en un center a 1024px y en resoluciones superiores se vea el contraste.

2 respuestas 2

1

¿Qué es lo que hace mal linear-gradient() ?

No veo que haga algo mal en tu ejemplo, simplemente así funciona.

La especificación dice que las posiciones de los colores deben ir en orden ascendente, y que si una posición tiene un valor inferior a una posición anterior en la lista, automáticamente esta última posición tendrá el valor más alto de los elementos anteriores.

Puedes ver la especificación aquí: https://drafts.csswg.org/css-images-3/#color-stop-syntax


Para entenderlo más fácil hagamos un ejemplo:

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, blue 100px, yellow 200px, green);
}
<div></div>

Aquí creé un gradiente que va de izquierda a derecha, con el rojo en la posición 0, el azul en 100px, el amarillo en 100px y el verde al final.


div {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, blue 100px, yellow 50px, green);
}
<div></div>

En este segundo ejemplo tan solo cambié la posición del color amarillo, a 50px, este valor es inferior a la posición anterior (la del azul), la cual es de 100px. Cumpliendo con lo que dice la especificación, lo que vemos es que el amarillo se ubica en la posición mayor de los elementos anteriores, en este caso 100px del azul (el rojo está en 0px).


No me queda muy claro que es lo que quieres lograr, pero si lo deseas hacer con linear-gradient es más fácil si utilizas las posiciones en orden ascendente:

div {
  width: 400px;
  height: 200px;
  background: linear-gradient(49deg, red 20px, pink 50px, blue 100px, yellow 200px, orange 300px, green 350px);
}
<div></div>

Un último detalle que se observa en este tercer ejemplo es que los únicos colores que pueden tener una porción "sólida" son el primero y el último, siempre y cuando utilices una posición, de lo contrario el gradiente iniciará desde 0px y terminará en el 100% del contenedor.

2
  • Entonces como en mi primer ejemplo solo el primer color y el ultimo pueden tener porción "solida"? Entonces como podria yo lograr hacer algo asi htmlcolorcodes.com/assets/images/… con linear-gradient? Commented el 12 oct. 2016 a las 17:13
  • La respuesta a la primera pregunta está en incluida en la explicación de arriba. En cuanto a la segunda pregunta, no es posible, pues es un gradiente como tal.
    – Shaz
    Commented el 12 oct. 2016 a las 17:18
1

.test{
  height:400px;
  background: linear-gradient(49deg, #575757 52px, #f6f6f6 39px, #092432 429px, #736357 173px, #727272 172px, #FFFFFF 491px, #FFFFFF 530px, #092432 480px, #FFFFFF 50px, #E6E6E6 252px, #092432 1075px);
}
<div class="test">
<div>

A mi me funciona bien (firefox). Mira si es el prefix de -webkit.

Prueba con esta herramienta: http://www.colorzilla.com/gradient-editor/ Te da las reglas para todos los navegadores.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.