html - texto - css color letra

Degradado de HTML/CSS que se detiene en una altura particular y continúa con un color sólido

Question

Quiero tener un gradiente en HTML / CSS.

Supongamos que un DIV siempre tiene más de 400px de altura. Quiero agregar el gradiente para que sea #FFFFFF en la parte superior y #EEEEEE en 300px. Así que el primer 300px (altura) es un agradable gradiente ''blanco a gris''. Después de 300px, independientemente de la altura del DIV, quiero que el color de fondo permanezca #EEEEEE.

Supongo que esto tiene algo que ver con las paradas de degradado (?)

¿Cómo puedo hacerlo?

PD Si no es posible en IE no me importa. Estoy bien si los navegadores de gecko y webkit muestran esto correctamente.

Answer 1

La solución más fácil para el problema es utilizar simplemente fondos múltiples y asignar un tamaño definido a la parte del fondo del degradado, ya sea en porcentaje o en píxeles.

body {
  background: linear-gradient(to right, green 0%, blue 100%), green;
  background-size: 100px 100%, 100%;
  background-repeat: no-repeat;
  background-position: right;
}

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

Mezcle y combine con los prefijos del navegador según sea necesario.

Answer 2

Manera alternativa

background-color: #eee;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);

background-repeat:no-repeat;
background-size:100% 300px;

Answer 3

Podrías hacer un

<div id="bgGen"></div>

entonces

#bgGen{
   height: 400px;    
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
   margin-bottom:-400px;
}

Es un poco engañoso, pero funciona ...

Answer 4

Primero, es bueno saber que puede usar más de 2 paradas de color en los gradientes, pero no puede usar píxeles fijos como coordenadas, tiene que ser un porcentaje.

En su caso, simplemente puede definir su primera parada de color al 0% y la segunda al 50% aproximadamente. Le sugiero que use un generador de gradiente porque la implementación depende del navegador.

se me ocurrio

background: #FFFFFF; /* old browsers*/ 
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=''#FFFFFF'', endColorstr=''#EEEEEE'', GradientType=0); /* ie */

Answer 5

Tuve lo mismo justo ahora. Quería poner un gradiente en la división de contenido principal que variaba significativamente en altura de una página a otra.

Terminé con esto y funciona muy bien (y no demasiado código extra).

CSS:

.main-container {
  position: relative;
  width: 100%;
}
.gradient-container {
  /* gradient code from 0% to 100% -- from colorzilla.com */
  height: 115px; /* sets the height of my gradient in pixels */
  position: absolute; /* so that it doesn''t ruin the flow of content */
  width: 100%;
}
.content-container {
  position: relative;
  width: 100%;
}

HTML:

<div class="main-container">
  <div class="gradient-container"></div> <!-- the only thing added for gradient -->
  <div class="content-container">
    <!-- the rest of my page content goes here -->
  </div>
</div>

Recomiendo usar el editor de gradiente de colorzilla para generar el CSS. Facilita la optimización entre navegadores (especialmente si está acostumbrado a Photoshop o Fireworks).

Answer 6

esto me funcionó

    background: rgb(238, 239, 240) rgb(192, 193, 194) 400px; 
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;

También alguien comentó por qué no solo hacer una imagen de degradado y establecerla como fondo. También prefiero ir principalmente a css ahora, con el diseño móvil y el uso limitado de datos para los visitantes, intenta limitar la mayor cantidad de imágenes posible. Si se puede hacer con css que hacerlo.

Answer 7

background-color: #eee;
background-image:         linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image:    -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */

Esto está de acuerdo con la documentación actual de Mozilla: https://developer.mozilla.org/en/CSS/-moz-linear-gradient .

He confirmado que funciona en Firefox 3.6 y Chrome 15.

Answer 8

background: -moz-linear-gradient(top,  #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);

esto funciona para mi

Answer 9

height: 400px;    
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));

Puede que tengas que jugar con 0.75, ya que es un porcentaje de tu altura, pero eso debería hacer el truco.