Cómo crear fondos gradientes en HTML y CSS

Escrito por kevin lee | Traducido por ehow contributor
Cómo crear fondos gradientes en HTML y CSS

Jupiterimages/Comstock/Getty Images

No necesitas programas como Flash o complementos de otros fabricantes para impresionar a quienes visiten tu sitio Web. CSS y JavaScript hacen posible que generes, en el navegador de cualquier usuario, animaciones con mucho color y efectos visuales. Una manera de hacer que tu sitio Web destaque, es desvaneciendo el fondo de la página Web al momento en que el usuario entra a tu sitio. Este es un viejo efecto HTML que todavía llama la atención de las audiencias digitales en todas partes.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre uno de tus documentos HTLM utilizando un editor HTLM o el programa Notepad.

  2. 2

    Pega el siguiente código JavaScript en el "encabezado" del documento: * Las tres primeras variables definen el color que los visitantes del sitio verán cuando abran tu página. Un navegador requiere de tres valores de color para producir un tono: rojo, verde y azul. Estas variables se representan de esta manera: "redstart", "greenStart" y "blueStart". Cada color tiene un valor hexadecimal. El valor hexadecimal de "redstart", por ejemplo, es "0xFF". Ignora los caracteres "0x". Los dos últimos "FF" son los más importantes, ya que éstos representan el valor real. "FF" equivale a 255 en el sistema decimal. Los valores hexadecimales para color empiezan con 00 y aumentan hasta 255. A mayor valor el color aparecerá con más intensidad. En este ejemplo, el color rojo, que se define como "redstart" es el más vasto de los tres. Su valor hexadecimal es "FF". En cambio, "00" es el valor hexadecimal para las variables "greenStart" y "blueStart". Estos tres valores juntos producen sólo el color rojo. Los visitantes de tu sitio al entrar verán ese color durante un breve lapso antes de que empiece a desvanecerse y se transforme en blanco. Con la variable "endColor" defines el color final de la página. En este ejemplo, ese color es el blanco. Con las variables "increment" y "delay" determinarás qué tan rápida la animación de evanescencia se debe ejecutar y qué tan fina esa animación debe parecer.

  3. 3

    Pega esta frase debajo del código que viste en el paso anterior: * Con esta función desvaneces el color de fondo de la página porque atribuyes la propiedad CSS "bgColor" al color real. La información escrita al cierre de la función llamará a la función repetidas veces hasta que el color de fondo llegue al color elegido. Es decir, cada vez que la afirmación llama a la función, la primera disminuirá el valor del color existente hasta alcanzar el valor que se ha definido en la variable “increment”. El resultado neto es el que produce el efecto atenuante donde el color inicial se empieza a desvanecer en el color final.

  4. 4

    Copia y pega la siguiente función de JavaScript abajo del código que viste en el paso anterior: * La función "fadeBackground" llamará a esta otra "getHexVal". La segunda, "getHexVal", convierte los valores decimales en hexadecimales. Las dos últimas líneas del código son las más importantes. Ellas provocan que el navegador ejecute todo cada vez que tu página Web se carga.

  5. 5

    Guarda el documento y ábrelo en un navegador. Cuando tu página Web aparezca, se desvanecerá tu color inicial hasta transformarse en blanco.

Consejos y advertencias

  • En algún sitio Web, visita un seminario sobre los colores HTML para que aprendas más sobre cómo funcionan en el sistema hexadecimal. De esta manera, podrás cambiar los valores de "redstart", "greenStart" y "blueStart" a cualquier tono que te guste. Por ejemplo, para cambiar tu color inicial a verde, ajusta el valor de "greenStart” a "0xFF " y el valor de los otros dos colores a "0x00". Si quieres que el color final sea negro en vez de blanco, cambia el valor de "EndColor " a "# 000000".
  • Ajusta los valores "increment" y "delay" para afinar el efecto de atenuación y lograr la transición que deseas. Al disminuir el valor "increment" provocas que la transformación de los colores sea más suave, pero también el efecto tardará más tiempo en completarse. Al reducir el valor "delay" aceleras la transición.

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media