¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!

Introducción al generador de gradientes CSS

El degradado CSS es una de las características que se incluyen en la imagen de tipo de datos. El generador de degradados CSS se utiliza para varias transformaciones entre dos o más colores que, en consecuencia, pueden servir como fondo para el elemento. Para transmitir la función de una manera más virtual, el degradado se puede definir como un bloque en el que dos colores se transforman de la manera que el desarrollador quiere.

Sintaxis y tipos de degradado CSS

Los degradados CSS son principalmente de dos tipos.El primer tipo es un gradiente lineal y el segundo es el gradiente radial. Con el degradado lineal, se pueden garantizar transiciones lineales de dos o más colores, como horizontal, vertical, etc. Por otro lado, el degradado radial toma un punto central y una forma para la transición de colores.

  • La siguiente es la sintaxis utilizada para crear un degradado lineal en CSS:
imagen-de-fondo: gradiente-lineal(dirección/ángulo, color1, color2, color3… )
  • Aquí el desarrollador tiene la opción de definir la dirección (hacia la izquierda, hacia abajo, etc.) o personalizar su gradiente usando ángulos.
  • El degradado radial en CSS se crea usando la siguiente sintaxis:
imagen-de-fondo: degradado-radial(forma/tamaño 'en' la posición, color1, color2, color3… )
  • Si el parámetro tiene forma, entonces puede ser un círculo o una elipse. Si el parámetro es el tamaño, entonces hay cuatro valores que se pueden usar, es decir, el lado más cercano, la esquina más cercana, el lado más lejano, la esquina más alejada.

Ejemplos de generador de degradado CSS

Echemos un vistazo a algunos de los ejemplos y aprendamos el uso de las funciones de degradado en CSS.

1. Degradados lineales para dos colores mediante CSS externo

  • Primero crearemos un archivo CSS ya que estamos usando el estilo externo para este ejemplo. Crearemos ID con diferentes direcciones de gradiente, de modo que se puedan demostrar todos los valores. Estos ID se pueden escribir de la siguiente manera. Se pueden implementar funciones adicionales según los requisitos.

Código:

linear1 { altura: 50px; ancho: 100px; imagen de fondo: degradado lineal (hacia abajo, rosa, púrpura); }
  • Además, podemos agregar un ID más, usando ángulo en lugar de dirección, para definir la transición de dos colores. La sintaxis será la siguiente:

Código:

ángulolineal { altura: 50px; ancho: 100px; imagen de fondo: gradiente lineal (50 grados, rosa, púrpura); }
  • Finalmente, el archivo CSS completo debería verse así: (grad.css)

Código:

linear1 { altura: 50px; ancho: 100px; imagen de fondo: degradado lineal (hacia abajo, rosa, púrpura); } lineal2 { altura: 50px; ancho: 100px; imagen de fondo: degradado lineal (a la derecha, rosa, púrpura); } linear3 { altura: 50px; ancho: 100px; imagen de fondo: degradado lineal (hacia arriba, rosa, púrpura); } linear4 { altura: 50px; ancho: 100px; imagen de fondo: degradado lineal (a la izquierda, rosa, púrpura); } ángulolineal { altura: 50px; ancho: 100px; imagen de fondo: gradiente lineal (50 grados, rosa, púrpura); }
  • Ahora, crearemos una página HTML. Dado que se trata de un CSS externo, primero llamaremos al archivo CS en la sección de encabezado de la página.
  • Además, llamaremos a todos los ID a través de diferenteselementos/bloques. La codificación del archivo HTML es la siguiente:

Código:

Prueba de gradiente lineal

Este es un degradado lineal con transición lineal de arriba a abajo



Este es un degradado lineal con transición lineal de izquierda a derecha



Este es un degradado lineal con transición lineal de abajo hacia arriba



Este es un degradado lineal con transición lineal de derecha a izquierda



Este es un degradado lineal con una transición lineal de 50 grados
  • Guardar este código como un archivo HTML y abrirlo en un navegador obtendrá resultados similares a la siguiente captura de pantalla:

Salida:

2. Degradado lineal para transiciones diagonales utilizando varios colores.

  • También podemos crear gradientes diagonales, usando múltiples direcciones.
  • En este ejemplo, demostraremos cómo crear un degradado lineal con transición diagonal. Usaremos CSS externo para esta demostración.
  • Crearemos un ID de CSS para la transición diagonal que es el degradado. Podemos usar más de dos colores para obtener una mejor imagen de la transición. El archivo CSS final debe ser similar al siguiente código:

Código:

linearDiag { altura: 100px; ancho: 400px; imagen de fondo: degradado lineal (hacia abajo a la izquierda, índigo, azul, verde, amarillo, naranja, rojo); }

Ahora crearemos una página HTML. Una vez que hayamos llamado al archivo CSS externo en la sección del encabezado, codificaremos la sección del cuerpo, de modo que usemos la ID creada en el archivo CSS. El código HTML final debería ser el siguiente:

Código:

Prueba de gradiente lineal diagonal

Este es un degradado diagonal lineal de derecha a izquierda hacia la transición inferior
  • Para obtener el resultado, guarde el archivo HTML y ábralo a través de un navegador. Debería ser similar a la siguiente captura de pantalla:

Salida:

3. Degradado radial usando tres colores a través de CSS externo.

  • Usaremos el estilo externo para este ejemplo, así que primero crearemos un archivo CSS.
  • En el archivo CSS, escribiremos varios ID con diferentes conjuntos de parámetros (posiciones, forma, cocientes de color, etc.) para degradados radiales. El código CSS final debería verse así:

Código:

radi1 { altura: 100px; ancho: 100px; imagen de fondo: degradado radial (amarillo, naranja, rojo); } radi2 { altura: 100px; ancho: 100px; imagen de fondo: gradiente radial (amarillo 5%, naranja 10%, rojo 20%); } radi3 { altura: 100px; ancho: 100px; imagen de fondo: gradiente radial (esquina más cercana al 50% 70%, verde, azul, púrpura); } radiCirc { altura: 100px; ancho: 100px; imagen de fondo: degradado radial (círculo, rojo, amarillo, naranja); }
  • Crearemos un archivo HTML y solicitaremos la hoja de estilo en la sección de encabezado. En la sección del cuerpo, crearemos diferentesbloques utilizando cada uno de los ID definidos en el código CSS. El HTML debe ser similar al siguiente código:

Código:

Demostración de gradiente radial

Este es el degradado radial predeterminado:



Este es un degradado radial con cocientes de color definidos:



Este es un degradado radial con dirección y posición definidas:



Este es un degradado radial en forma circular:
  • Al guardar este archivo y abrirlo a través de un navegador obtendrá el siguiente resultado:

Salida:

Explicación: El ejemplo anterior cubrió la mayoría de los usos básicos de un degradado CSS.Hay una opción más para los desarrolladores, donde pueden repetir el gradiente lineal personalizado varias veces. Esto se puede lograr a través de la función repeating-linear-gradient(). Uno puede pasar parámetros similares a los de gradiente lineal y lograr un resultado repetitivo.

Artículos recomendados

Esta es una guía para el generador de degradado CSS. Aquí discutimos el concepto básico y ejemplos del generador de gradiente CSS con códigos y salidas adecuados. También puede consultar nuestros otros artículos relacionados para obtener más información -

  1. Subrayado de texto CSS
  2. Posición CSS
  3. Listas CSS
  4. Selector de atributos CSS

¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!

Categoría:

Tutorial HTML