Gradientes en CSS explicaron
Un gradiente se refiere a una imagen con efectos de transición, y se puede usar un gradiente en cualquier lugar como imágenes. Los gradientes se crean con la ayuda de CSS, y ofrece crear gradientes con propiedades extensas. Por ejemplo, un gradiente podría ser lineal, radial o cónico. Cada tipo de gradiente es asistido por la función respectiva.
En este artículo, hemos proporcionado una idea de los gradientes en CSS y se esperan los siguientes resultados de aprendizaje.
- Tipos de gradientes en CSS
- función de gradiente lineal ()
- función de gradiente radial ()
- función de gradiente cónica ()
Tipos de gradiente en CSS
El gradiente se puede dividir en tres categorías, lineal, radial y cónica. Las próximas secciones presentarán los conceptos básicos de cada tipo de gradiente y cómo se usan en CSS.
Gradiente lineal
El gradiente lineal se puede aplicar para obtener el efecto de transición en una dimensión lineal (una dirección a la vez).
Cómo usar la función de gradiente lineal ()
La función de gradiente lineal () le permite crear un gradiente lineal con varios efectos.
IMAGEN DE FINTA: gradiente lineal (dirección, color1, color2, ...);El dirección del gradiente lineal puede aceptar los siguientes valores
a derecha: Se usa para mostrar el gradiente de la dirección izquierda a la derecha
a la izquierda: para mostrar el gradiente de derecha a izquierda
a la parte inferior (por defecto): hacia el fondo
hasta arriba: muestra el efecto de gradiente de abajo hacia arriba
Además, el efecto de gradiente lineal se puede aplicar en diagonal también utilizando los siguientes valores del dirección parámetro.
a la parte inferior derecha: El gradiente comenzará desde la parte superior izquierda y se inclina hacia la parte inferior derecha
a la parte inferior izquierda: El gradiente comienza desde la esquina superior derecha hacia la parte inferior izquierda
a la parte superior a la derecha: comienza desde la esquina inferior izquierda hacia la parte superior derecha
hacia arriba a la izquierda: desde la parte inferior derecha a la parte superior izquierda
Ejemplo
El siguiente código practica el uso de gradiente lineal en un elemento HTML.
Html
Gradiente lineal
El código anterior crea un
elemento dentro de ese div.
CSS
El código anterior utiliza un gradiente lineal con los siguientes valores
- la dirección se establece en "de izquierda a derecha"
- El valor de color1 y color2 se establece en púrpura y luces respectivamente
Producción
Como la dirección del gradiente era de izquierda a derecha, por lo tanto, el púrpura el color comienza desde la izquierda, mientras que el LUZEAGREENCOLOR comienza de la derecha.
Gradiente radial
Como muestra su nombre, el gradiente radial se genera desde el punto central de la imagen. El efecto de transición se puede generar en forma de un círculo o un eclipse.
Cómo usar la función de gradiente radial ()
Se puede crear un gradiente radial siguiendo la sintaxis que se proporciona a continuación.
Image de fondo: gradiente radial (tamaño de forma en posición, color1, color2 ...);En la sintaxis anterior,
- el forma (El valor predeterminado es una elipse) podría ser una elipse o un círculo
- el tamaño (El valor predeterminado es la esquina más lejana) puede aceptar la esquina más lejana/del lado más lejano, más cercano/del lado más cercano.
- el degradado Comenzará desde color1 (en el centro, ya sea en forma de eclipse o forma de círculo) seguido de color2 etcétera.
Ejemplo
El código escrito a continuación muestra la creación del gradiente radial.
Html
Gradiente radial
CSS
El CSS anterior crea una graduación radial con color1 = "verde", color2 = "amarillo" y color3 = "rojo".
Producción
Se observa a partir de la salida que el gradiente ha comenzado con color verde, rodeado de amarillo, y el rojo está al final.
Gradiente cónico
El gradiente cónico se usa para crear un gradiente de tal manera que cada color comience y gire alrededor del centro. Son gradientes radiales similares, pero los colores se detienen en el borde de la forma, mientras que el color en el gradiente radial se detiene
Cómo usar el gradiente cónico
El gradiente cónico se puede crear siguiendo la sintaxis proporcionada a continuación:
IMAGEN DE ANTECEDENTES: Gradiente cónico (desde el ángulo en la posición, color1La sintaxis anterior se describe a continuación,
- el "desde el ángulo"Define la rotación del gradiente en sentido horario y el"en la posición"Define el inicio del gradiente cónico.
- el color Define el color y la condición de parada para ese color.
- el "Desde el ángulo", "en la posición" y son parámetros opcionales
Ejemplo
El siguiente ejemplo demuestra cómo se puede crear un gradiente cónico
Html
Gradiente cónico
CSS
En el código anterior, se usa la función de gradiente cónica () que crea un gradiente que tiene verde, amarillo y rojo.
Producción
Como se utilizan los valores predeterminados para los parámetros de ángulo, por lo tanto, el gradiente ha comenzado desde el centro con el ángulo de rotación de 0 grados.
Conclusión
Un gradiente es una imagen con efectos de transición o sólidos, y se crea con la ayuda de CSS. Se puede crear un gradiente con diversas funcionalidades y tipos como gradiente lineal, gradiente radial o gradiente cónico. Este artículo demuestra el trabajo y el uso del gradiente en CSS. El gradiente lineal crea un efecto de gradiente en una sola dirección, mientras que el radial y la cónica pueden usarse para efectos rotativos.