Quiero tener un gradiente en HTML/CSS.

Asumir un DIV es siempre más de 400px de alto. Quiero añadir que el gradiente de lo que es #FFFFFF en la parte superior y #EEEEEE en 300px. Así que el primer 300px (altura-wise) es un buen blanco a gris’ de gradiente. Después de 300px, independientemente de la altura de la DIV va, quiero que el color de fondo de la estancia #EEEEEE.

Supongo que esto tiene algo que ver con el gradiente de paradas (?)

¿Cómo puedo hacerlo?

P. S. Si no es posible que en IE no me importa. Yo estoy bien si los navegadores gecko y webkit muestran correctamente.

  • por qué no utilizar una 1px por 300px imagen de fondo de la gradiente #FFF – #EEE (sé que esto es un poco arcaico dado CSS3) se podía llegar a repeat-x pero no en y y, a continuación, establecer el color de fondo como #EEE, así que más allá de 300px la imagen de fondo del gradiente se detiene y el color sólido llena en
  • jaja.. eso es lo que yo solía hacer hasta este momento, cuando pensé que me gustaría probar algunas de las nuevas cosas en HTML(5) y CSS.. 😀 Esto no es parte de la producción del sitio, su explorando. Así que el objetivo es más acerca de cómo es trabajar con CSS3 en lugar de simplemente llegar a tiempo al trabajo.
InformationsquelleAutor | 2011-02-16

9 Comentarios

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

    Usted podría tener que jugar con 0.75 ya que es un porcentaje de su altura, pero que debe hacer el truco.

    • um.. no puedo decirle que deje a un determinado valor de PÍXEL en lugar de un valor de PORCENTAJE?
    • Aquí ya va: height: 800px; background: -webkit-gradient(linear, left top, 0 300, from(#fff), to(#eee)); } Que siempre se detiene en 300px.
    • Los que votaron esta abajo y explique su razonamiento, por favor?
    • se supone que se debe especificar explícitamente píxeles como en 300px (no downvote aunque por cierto). Se traga todo tipo de valores, en contraste con el viejo -webkit-linear-gradient la que sólo se conoce 0.0-1.0 y 0-100% y no se puede parar en los valores de los píxeles.
    • Es por eso que hay otro comentario anterior tuyo, de mí, con el valor de píxel. 🙂
    • Sí, pero lo que tienes ahí es ...top, 0 300, ...; necesita ser ...top, 0 300px, ...
    • Gracias por la captura de la errata.
    • Otra razón por la que este debe ser votada abajo es porque sólo funciona en webkit, pero el autor de la pregunta, dijo gecko y webkit se quería.

  2. 30
    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 es de acuerdo a la actual Mozilla documentación: https://developer.mozilla.org/en/CSS/-moz-linear-gradient.

    He confirmado que funciona en Firefox 3.6 y Chrome 15.

    • La sustitución de top con to bottom hizo por mí en Firefox Cuántica (v59)
  3. 11

    Forma alternativa de

    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;
    • Esto funcionó muy bien para mí en Chrome. Gracias!
    • Sí, funciona en Chrome (navegadores basados en Webkit). Justo allí. En ningún otro lugar.
    • He actualizado la respuesta a incluir otro navegador prefijos
    • También debe actualizar el unprefixed versión de acuerdo a las especificaciones más recientes. top es obsoleto.
  4. 4

    Primer lugar, es bueno saber que usted puede utilizar más de 2 color-stop en los degradados, pero no puede usar el fijo de píxeles como coordenadas, tiene que ser un porcentaje.

    En su caso, usted puede simplemente definir su primera color-stop en el 0% y el segundo al 50% o así. Sugiero el uso de un generador de gradiente debido a que la aplicación depende del navegador.

    Se me ocurrió

    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 */
    • Usted puede utilizar los píxeles en los navegadores webkit. Donde hace referencia a left top, left bottom usted puede poner los valores de los píxeles que hay. Ver mi ejemplo a continuación.
    • Es bueno saber. Que versión de Chrome/Safari usa usted? ES relativa a este blog?
    • Ser conscientes de que el webkit sintaxis es en flujo… webkit.org/blog/1424/css3-gradients
  5. 3
    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 mí

    • Ok, tomado de colorzilla.com/gradient-editor & acaba de quitar los comentarios, respectivamente poner px valores como segunda unidad de argumento no muy innovadora.
  6. 2

    Usted podría hacer un:

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

    luego

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

    De que es un poco de trampa, pero funciona…

    • Ese es el problema, que es un poco un hack 🙂 Gracias! (Nota: yo no era la herramienta que -1 tu respuesta 😉
  7. 2

    Tuve la misma cosa ahora mismo. Yo quería poner un gradiente en el div del contenido principal que varía de manera significativa en la altura de la página a página.

    Terminé con este y funciona muy bien (y no demasiado código adicional).

    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 el uso de colorzilla del gradiente-editor para generar el CSS. Hace cross-browser optimización de muy fácil (sobre todo si estás acostumbrado a Photoshop o Fireworks).

  8. 2

    La solución más sencilla para el problema es, simplemente, el uso de múltiples orígenes y dar el gradiente de parte del fondo de un tamaño definido, ya sea en porcentaje o en píxeles.

    CSS:

    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;
    }

    Mezclar y combinar con el navegador de prefijos como sea necesario.

  9. 0

    esto funcionó para mí

        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 hacer un gradiente de la imagen y establecer como fondo. Yo prefiero ir en su mayoría css ahora también, con diseño móvil y limita el uso de datos para los visitantes, trate de limitar tanto las imágenes como sea posible. Si se puede hacer con css que hacerlo

Dejar respuesta

Please enter your comment!
Please enter your name here