remove "this is a stub"... (#25947)
This commit is contained in:
Tom
mrugesh mohapatra
@ -2,88 +2,81 @@
|
||||
title: Linear Gradient
|
||||
---
|
||||
## Linear Gradient
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/linear-gradient/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
|
||||
In Linear Gradient, the colors flow in a single direction, i.e- From Left to Right, Top to Bottom, or any angle you choose.
|
||||
|
||||
|
||||
You can use a CSS linear gradient to make colors transition or fade from one color to another.
|
||||
|
||||
|
||||
**A Linear gradient with Two colour stops**
|
||||
|
||||
### Syntax-
|
||||
To create a linear gradient you must define atleast two colour stops.(They are the colours the transitions are created among).It is declared on either the **background** or **background-image** properties.
|
||||
|
||||
```
|
||||
### Syntax
|
||||
To create a linear gradient you must define at least two color stops.(They are the colors the transitions are created from). It is declared on either the `background` or `background-image` properties.
|
||||
```css
|
||||
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
|
||||
```
|
||||
**Note: If no direction is Specified, the transition is Top to Bottom by default**
|
||||
Note: If no direction is specified, the transition is `top to bottom` by default
|
||||
|
||||
### Different Gradient transitions-
|
||||
|
||||
### Different Gradient transitions
|
||||
**Top to Bottom :**
|
||||
```
|
||||
```css
|
||||
background: linear-gradient(red, yellow);
|
||||
```
|
||||
|
||||
|
||||
**Left To Right :**
|
||||
|
||||
To make it left to right, you add an additional parameter at the beginning of the linear-gradient() starting with the word **to** which indicates the direction:
|
||||
```
|
||||
To make it left to right, you add an additional parameter at the beginning of the linear-gradient starting with the word `to` followed by the direction you want the transition to go.
|
||||
```css
|
||||
background: linear-gradient(to right, red , yellow);
|
||||
```
|
||||
|
||||
|
||||
**Diagonal Positions :**
|
||||
|
||||
You can also transition a gradient diagonally by specifying the horizontal and vertical starting positions, for example, top-left, or bottom-right.
|
||||
|
||||
Here's a sample for a gradient starting at top-left-
|
||||
```
|
||||
You can also transition a gradient diagonally by specifying the direction you want the transition to go, for example: `top left` or `bottom right`.
|
||||
Here's a sample for a gradient starting at top-left
|
||||
```css
|
||||
background: linear-gradient(to bottom right, red, yellow);
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Using Angles to Specify Direction of the gradient-
|
||||
|
||||
### Using Angles to Specify Direction of the gradient
|
||||
You can also use angles, to be more accurate in specifying the direction of the gradient:
|
||||
```
|
||||
```css
|
||||
background: linear-gradient(angle, colour-stop1, colour-stop2);
|
||||
```
|
||||
The angle is specified as an angle between a horizontal line and the gradient line.
|
||||
|
||||
```
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow);
|
||||
```
|
||||
|
||||
|
||||
### Using more than two colours-
|
||||
|
||||
You're not limited to just two colours, you can use as many comma seperated colours as you want.
|
||||
```
|
||||
|
||||
### Using more than two colors
|
||||
You're not limited to just two colors, you can use as many comma separated colors as you want.
|
||||
```css
|
||||
background: linear-gradient(red, yellow, green);
|
||||
```
|
||||
|
||||
|
||||
|
||||
You can also use other colour syntaxes like RGB or hex codes to specify the colors.
|
||||
You can also use other color units like RGB or hex codes to specify the colors.
|
||||
|
||||
### Hard colour stops-
|
||||
|
||||
You can not only use gradients to transition with fading colours, but you can also use it to change from one solid colour to another solid colour instantly
|
||||
### Define where the colors will transition
|
||||
Your gradient can transition wherever you want by giving your colors a value when you define the linear-gradient
|
||||
```css
|
||||
background: linear-gradient(to right,red 5px, yellow 25%, green 80%);
|
||||
```
|
||||
background: linear-gradient(to right,red 15%, yellow 15%);
|
||||
|
||||
|
||||
In this case, the transition from red to yellow will start at 5px and finish at 25% from the left, and the transition from yellow to green will start at 25% and finish at 80% from the left.
|
||||
|
||||
|
||||
### Hard color stops
|
||||
You can not only use gradients to transition with fading colors, but you can also use it to change from one solid color to another solid color instantly
|
||||
```css
|
||||
background: linear-gradient(to right,red 45%, yellow 45%);
|
||||
```
|
||||
|
||||
|
||||
|
||||
Here the transition from red to yellow will start at 45% and finish at 45%.
|
||||
|
||||
|
||||
**More information-** [Linear-gradient on Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
|
||||
**More information:** [Linear-gradient on Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
|
||||
|
||||
Reference in New Issue
Block a user