CSS3 Gradient Backgrounds


Hace poco estaba realizando un proyecto para una de mis clases en la universidad y me encontré con la necesidad de crear una interfaz gráfica sencilla pero decente.

Al comenzar a planear el diseño de mi interfaz, me propuse crear un fondo degradado, y como es normal, utilice las reglas definidas para crear un degradado. El degradado lo quería insertar en body, ya que dentro de body, tendría un div con un id igual a wrapper. Entonces, teniendo una estructura html así:


<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id='wrapper'>
    </div>
  </body>
</html>

agregué los siguientes estilos:

body{
  background: #6B6B6B;
  background: linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%);
  background: -o-linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%);
  background: -moz-linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%);
  background: -webkit-linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%) ;
  background: -ms-linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%);
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.26, #C7C7C7),
    color-stop(0.83, #6B6B6B)
  );
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6B6B6B', endColorstr='#C7C7C7');}

wrapper{
  width: 900px;
  background-color: #fff;}

Lo que sucedió después fue que cuando vi mi html en mi navegador, el degradado no se aplicaba en toda la hoja, sólo se aplicaba hasta el final de mi wrapper. En este caso, el wrapper tenía una imagen de aproximadamente unos 200px de alto. Por lo tanto, mi degradado era de 200px de alto y comenzaba en la parte superior de la página. De la misma manera, el degradado se repetía hasta el final de la página en bloques pequeños como de 15px de alto, haciendo que mi background pareciera una de esas imágenes pequeñas como de 30×30 que se repiten por toda la página, dando como como resultado un background rayado.

Leyendo en foros encontré cual era la manera correcta de hacer que el degradado se mostrara en toda la página, no dependiendo del tamaño de los objetos que tiene dentro, ya que una vez que agregué mas objetos a mi wrapper y el contenido ya no cabía en la pantalla, teniendo que utilizar la barra de desplazamiento del navegador, me di cuenta que hasta abajo, en el final de la página, se terminaba mi degradado y me ponía una linea como de 10px con el color que indiqué en la hoja de estilos.

La forma correcta de hacer que tu bakcground tenga un degradado, es agregando las siguientes reglas a la hoja de estilos:

html{height: 100%;}
body{
  background: #6B6B6B;
  background: linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%);
  background: -o-linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%);
  background: -moz-linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%);
  background: -webkit-linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%) ;
  background: -ms-linear-gradient(bottom, #C7C7C7 26%, #6B6B6B 83%);
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.26, #C7C7C7),
    color-stop(0.83, #6B6B6B)
  );
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6B6B6B', endColorstr='#C7C7C7');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
  height: 100%;}

Al final solo agregué las ultimas 3 lineas y con eso fue mas que suficiente para que mi degradado se mostrara en toda la página.

Espero que les sea de utilidad!

Anuncios
Esta entrada fue publicada el 5 mayo, 2012 a las 22:25. Se guardó como Tech y etiquetado como , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: