91 lines
3.6 KiB
Markdown
91 lines
3.6 KiB
Markdown
---
|
|
title: Linear Gradient
|
|
localeTitle: Gradiente lineal
|
|
---
|
|
## Gradiente lineal
|
|
|
|
Esto es un talón. [Ayuda a nuestra comunidad a expandirla](https://github.com/freecodecamp/guides/tree/master/src/pages/css/linear-gradient/index.md) .
|
|
|
|
[Esta guía rápida de estilo ayudará a asegurar que su solicitud de extracción sea aceptada](https://github.com/freecodecamp/guides/blob/master/README.md) .
|
|
|
|
#### Más información:
|
|
|
|
En Gradiente lineal, los colores fluyen en una sola dirección, es decir, de izquierda a derecha, de arriba a abajo, o cualquier ángulo que elija.
|
|
|
|
|
|
|
|
**Un degradado lineal con dos paradas de color.**
|
|
|
|
### Sintaxis-
|
|
|
|
Para crear un degradado lineal, debe definir al menos dos paradas de color (son los colores entre los que se crean las transiciones). Se declara en las propiedades de **fondo** o **de imagen de fondo** .
|
|
```
|
|
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
|
|
```
|
|
|
|
**Nota: Si no se especifica ninguna dirección, la transición es de arriba a abajo por defecto**
|
|
|
|
### Diferentes transiciones de gradiente
|
|
|
|
**De arriba hacia abajo :**
|
|
```
|
|
background: linear-gradient(red, yellow);
|
|
```
|
|
|
|
|
|
|
|
**De izquierda a derecha :**
|
|
|
|
Para hacerlo de izquierda a derecha, agrega un parámetro adicional al comienzo del gradiente lineal () que comienza con la palabra **a la** que indica la dirección:
|
|
```
|
|
background: linear-gradient(to right, red , yellow);
|
|
```
|
|
|
|
|
|
|
|
**Posiciones diagonales:**
|
|
|
|
También puede transicionar un degradado diagonalmente especificando las posiciones de inicio horizontales y verticales, por ejemplo, arriba a la izquierda o abajo a la derecha.
|
|
|
|
Aquí hay una muestra de un gradiente que comienza en la parte superior izquierda:
|
|
```
|
|
background: linear-gradient(to bottom right, red, yellow);
|
|
```
|
|
|
|
|
|
|
|
### Usando ángulos para especificar la dirección del gradiente
|
|
|
|
También puede usar ángulos, para ser más precisos al especificar la dirección del gradiente:
|
|
```
|
|
background: linear-gradient(angle, colour-stop1, colour-stop2);
|
|
```
|
|
|
|
El ángulo se especifica como un ángulo entre una línea horizontal y la línea de gradiente.
|
|
```
|
|
background: linear-gradient(90deg, red, yellow);
|
|
```
|
|
|
|
|
|
|
|
### Usando más de dos colores
|
|
|
|
No está limitado a solo dos colores, puede usar tantos colores separados por comas como desee.
|
|
```
|
|
background: linear-gradient(red, yellow, green);
|
|
```
|
|
|
|
|
|
|
|
También puede usar otras sintaxis de color como RGB o códigos hexadecimales para especificar los colores.
|
|
|
|
### Color duro para
|
|
|
|
No solo puede usar degradados para hacer la transición con colores difuminados, sino que también puede usarlo para cambiar instantáneamente de un color sólido a otro color sólido.
|
|
```
|
|
background: linear-gradient(to right,red 15%, yellow 15%);
|
|
```
|
|
|
|
|
|
|
|
**Más información** [: gradiente lineal en Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) |