Cómo utilizar el color de fondo con gradiente en HTML

Escrito por erick kristian | Traducido por daniela laura arjones
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo utilizar el color de fondo con gradiente en HTML
El código HTML se usa para construir páginas web. (Comstock/Comstock/Getty Images)

En diseño gráfico, un gradiente es un bloque de color que cambia gradualmente, o se desvanece, de un color a otro. Por ejemplo, si el color se va del negro al blanco, el color del medio sería gris. En algunos medios gráficos, se pueden lograr degradados complejos, desvaneciéndose entre varios colores a diferentes tasas de cambio y uso de diferentes patrones o ángulos de desvanecimiento. En una página Web, es posible crear un fondo degradado sencillo con algo de código. Sin embargo, asegúrate de no usar colores que se mezclen con el texto en la página.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Necesitarás

  • Editor de HTML

Lista completaMinimizar

Instrucciones

  1. 1

    Abre el archivo HTML en un programa de edición de HTML, como el Bloc de notas.

  2. 2

    Consulta la lista de códigos de color HTML. Selecciona los dos colores que deseas para tu gradiente.

  3. 3

    Copie la siguiente línea en el cuerpo del archivo HTML: <body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#000000', gradientType='0');"> En este ejemplo, el color inicial es de color negro (código de color HTML "# 000000") y el color final es de color blanco (código de color HTML "# FFFFFF"). Este código está diseñado para funcionar con Internet Explorer.

  4. 4

    Reemplaza los códigos de colores de inicio y final con los que has elegido.

  5. 5

    Guarda los cambios y previsualiza el sitio en Internet Explorer.

Consejos y advertencias

  • Este código sólo funciona con Internet Explorer u otros navegadores con el correspondiente plug-in.

No dejes de ver

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