septiembre 16, 2021
Degradados colores

Degradados colores

😉 Degradados colores online

La función linear-gradient() CSS produce una imagen que consiste en una transición progresiva a lo largo de una línea recta entre dos o más colores. El resultado es el objeto de tipo de datos <gradiente>, que es un tipo especial de <imagen>.
La fuente se almacena en un repositorio GitHub para este ejemplo interactivo. Clona https://github.com/mdn/interactive-examples y danos una petición de extracción si quieres contribuir al proyecto de ejemplos interactivos.
La fuente se almacena en un repositorio GitHub para este ejemplo interactivo. Por favor, clona https://github.com/mdn/interactive-examples y danos una petición pull si quieres contribuir al proyecto de ejemplos interactivos. Sintaxis/* Un gradiente inclinado 45 grados,
La dirección del punto inicial de la línea de gradiente. Si se indica, la palabra consta de hasta dos palabras clave: una indica el lado horizontal (izquierda o derecha) y otra indica el lado vertical (izquierda o derecha) (arriba o abajo). El orden de las palabras clave en el lado no importa. Si no se especifica, se establece en la parte inferior por defecto.

👂 Degradados colores en línea

¡Muchas de las tendencias de los 90 han vuelto a estar de moda! Crop tops, gargantillas, (… en serio) y scrunchies. Y hay un patrón que toma por asalto el mundo de la arquitectura que se sentiría como en casa en 1995, y son los gradientes.
Los gradientes eran una forma común de añadir color y profundidad a los diseños hace unas décadas. Hasta finales de la década de 2000, cuando pasaron a un segundo plano en el diseño de viviendas, siguieron siendo una tendencia de diseño bastante influyente. Sin embargo, los gradientes volvieron en 2018 de una manera importante, y en todas partes los vemos. Son una forma de desarrollar diseños planos, añadir superposiciones de color a las imágenes y añadir textura a los fondos (un cambio de estilo conocido como plano 2.0).
Los degradados, también conocidos como transformaciones de color, son una fusión gradual de un color a otro color (o los degradados no se limitan a dos tonos si estás en un estado de ánimo vibrante, de un color a otro color a otro color).
Los degradados pueden combinar o convertir colores similares (como diferentes tonos de azul o naranja claro en rojo oscuro, por ejemplo) o colores totalmente diferentes o contrastantes (como púrpura y rojo o azul y amarillo).

✨ Degradados colores del momento

Nota: Si no se ve la muestra de gradiente blanca y negra predeterminada, se puede encontrar seleccionando Windows > Bibliotecas de Muestras > Muestras predeterminadas > Imprimir. Haz clic para aplicar el degradado en el panel que aparece.
Puedes cambiar la forma del degradado, el ángulo del degradado, los colores del degradado y más en el panel de degradado. El degradado se muestra como un control deslizante de degradado con círculos debajo de él hacia la parte inferior de la pantalla, llamados topes de color, que reflejan los colores del degradado.
En la barra de herramientas, seleccione la función Gradiente. Puede ver el anotador de gradiente en la obra de arte seleccionada, que muestra el deslizador de gradiente y las paradas de color. Para editar el color, haga doble clic en una parada de color de la ilustración, arrastre las paradas de color, haga clic debajo del control deslizante de gradiente para agregar nuevas paradas de color y más.
Haz clic y arrastra en una dirección alrededor de la obra de arte para ajustar la dirección y la longitud del degradado. El ángulo que arrastres define la dirección del degradado y la longitud determina la distancia que arrastres.

👇 Degradados colores 2020

El formulario de datos <gradiente>, un tipo especial de <imagen> formado por una transformación progresiva entre dos o más colores, representa los gradientes CSS. Se puede elegir entre tres tipos de gradientes: lineal (creado con la función gradiente-lineal()), radial (creado con la función gradiente-radial()) y cónico (creado con la función gradiente-cónico()). Con las funciones repetición-gradiente lineal(), repetición-gradiente radial(), y repetición-gradiente cónico(), también se pueden crear gradientes de repetición.
Los gradientes se pueden utilizar en cualquier lugar donde se pueda usar una <imagen>, como en los fondos. Dado que los gradientes se crean dinámicamente, se puede negar la necesidad de archivos de imagen rasterizados que se han utilizado históricamente para lograr efectos similares. Además, como el navegador crea gradientes, cuando se hace un zoom, se ven mejor que las imágenes rasterizadas, y pueden ser redimensionadas sobre la marcha.
Empezaremos implementando gradientes lineales, luego usaremos los gradientes lineales como ejemplo para añadir características que son soportadas en todas las formas de gradientes, y luego pasaremos a los gradientes radiales, cónicos y de repeticiónUsando gradientes linealesUn gradiente lineal genera una banda de colores que progresa en línea recta.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.Más información
Privacidad